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

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

});

Answer 1

jQuery 自定义占位符不仅在 Edge 中不起作用。它在 Firefox 中看起来也很差。那是因为插件也需要 CSS。关于浏览器支持的评论说相关的 CSS 在此 SASS 文件中：partials/_formBasics.scss。我建议调整 SASS 以支持新的 Edge 浏览器。

例如，this fiddle fixes it in both Edge and Firefox by adding some CSS.这些是插件使用的CSS 类：

• placeholder
• placeholder-for-input
• PLACEHOLDER-LABEL
• hasValue
• FocusNoValue

您不需要全部使用它们。 fiddle 仅添加了以下内容。我们隐藏占位符，对齐标签，并在适当的时候隐藏标签。

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 中的结果