Edge浏览器输入占位符（文本重复）

Question

这是HTML代码：

<input id="testInput" placeholder="something" />

更新 发现这段JavaScript覆盖了“placeholder”属性的工作方式。似乎它在Edge浏览器中无法覆盖。

define(['jquery'], function ($) {
(function ($) {
    var default_options = {
        labelClass: 'placeholder'
    };
    var ph = "PLACEHOLDER-INPUT";
    var phl = "PLACEHOLDER-LABEL";
    var boundEvents = false;
    /*
    //using custom placeholder for all browsers now: partials/_formBasics.scss
    //check for browser support for placeholder attribute
    var input = document.createElement("input");
    if('placeholder' in input) {
    $.fn.placeholder = $.fn.unplaceholder = function () { }; //empty function
    delete input;
    return;
    };
    delete input;
    */


    $.fn.placeholder = function (options) {
        bindEvents();
        var opts = $.extend(default_options, options);
        this.each(function () {
            var rnd = Math.random().toString(32).replace(/\./, ''),
            input = $(this),
            label = $('<label style="position:absolute; z-index:100; "></label>');
            if (!input.attr('placeholder') || input.data(ph) === ph) return;
            //make sure the input tag has an ID assigned, if not, assign one.
            if (!input.attr('id')) {
                input.attr('id', 'input_' + rnd);
            }
            label.attr('id', input.attr('id') + "_placeholder").data(ph, '#' + input.attr('id')) //reference to the input tag
        .attr('for', input.attr('id')).addClass(opts.labelClass).addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
        .addClass(phl).text(input.attr('placeholder'));
            input.data(phl, '#' + label.attr('id')) //set a reference to the label
        .data(ph, ph) //set that the field is watermarked
        .addClass(ph) //add the watermark class
        .before(label); //add the label field to the page
            itemOut.call(this);
        });
        //$('label').disableSelection();
    };
    $.fn.unplaceholder = function () {
        this.each(function () {
            var input = $(this),
            label = $(input.data(phl));
            if (input.data(ph) !== ph) return;
            label.remove();
            input.removeData(ph).removeData(phl).removeClass(ph);
        });
    };

    function bindEvents() {
        if (boundEvents) return;
        $(document).on('click, focusin, change', '.' + ph, itemIn);
        $(document).on('focusout', '.' + ph, itemOut);
        $(document).on('keyup', '.' + ph, itemKeyStroke);
        bound = true;
        boundEvents = true;
    };

    function itemIn() {
        var input = $(this),
    label = $(input.data(phl));
        if ($(input).val().length > 0)
            $(label).addClass('hasValue').removeClass('FocusNoValue');
        else
            $(label).addClass('FocusNoValue').removeClass('hasValue');
    };

    function itemOut() {
        var input = $(this),
    label = $(input.data(phl));            
        if ($(input).val().length > 0)
            $(label).addClass('hasValue').removeClass('FocusNoValue');
        else
            $(label).removeClass('FocusNoValue').removeClass('hasValue');
    };
    function itemKeyStroke() {
        var input = $(this),
        label = $(input.data(phl));
        if ($(input).val().length > 0)
            $(label).addClass('hasValue').removeClass('FocusNoValue');
        else
            $(label).addClass('FocusNoValue').removeClass('hasValue');
    };
} (jQuery)); //placeholder

});

- Induster

---

你需要更加具体！这个 JSFiddle 在 IE Edge 上看起来很好。https://jsfiddle.net/88z7u4kf/3/ - Adam Buchanan Smith

我刚刚发现了一段覆盖“placeholder”属性的JavaScript代码。所以我离解决问题更近了。我会在这个问题中更新这个信息。 - Induster

是的，JavaScript听起来可能是一个潜在的原因。 - Adam Buchanan Smith

谢谢大家的关注。上面被注释掉的代码“检查浏览器支持……”- 不确定为什么要注释掉它。将该代码放回去已经解决了问题。 - Induster

将“检查浏览器支持”代码重新放回去并非必要，而且可能违反了应用程序的设计。评论指出该应用程序“现在对所有浏览器使用自定义占位符：partials/_formBasics.scss”，这意味着不再需要检查浏览器支持，因为有一些新的CSS使得自定义占位符适用于所有浏览器。该CSS位于SASS文件中。 - Shaun Luttin

Answer 1

在 Edge 浏览器中，jQuery 自定义占位符不起作用并且在 Firefox 中也效果不佳。这是因为插件需要 CSS。有关浏览器支持的注释指出，相关的 CSS 在以下 SASS 文件中：partials/_formBasics.scss。我建议修改该 SASS 以支持新版 Edge 浏览器。

例如，此示例 通过添加一些 CSS 在 Edge 和 Firefox 上修复了问题。这些是插件使用的 CSS 类：

- placeholder - placeholder-for-input - PLACEHOLDER-LABEL - hasValue - FocusNoValue 您不需要全部使用它们。示例仅添加了以下内容：隐藏占位符、对齐标签并在适当时隐藏标签。

label.placeholder {
    color:red;
    font-family:arial;
    /* hide the placeholder */
    background-color:white; 
    /* align the label */
    margin-top:0.1rem;
    margin-left:0.1rem;
    font-size:0.9rem;
}
label.hasValue, label.FocusNoValue {
    /* hide the label when appropriate */
    display:none !important;
}

在Edge中固定结果

- Shaun Luttin

---

这个CSS被包含在_formBasics.scss文件中：label.placeholder { cursor: text; font-weight:normal !important; padding: 4px 4px 4px 5px; color: #999999; display:block; } label.hasValue{display:none !important;} label.FocusNoValue{color:#ccc;} - Induster

嘿 @Induster 很好知道。你想让我在我的回答中加入一些关于那个的内容吗？ - Shaun Luttin

我正在测试通过将display:none !important添加到label.FocusNoValue来纠正问题。 - Induster