Edge Browser input placeholder (text duplicated)

Question

This is the html:

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

UPDATED found this piece of javascript overriding how the "placeholder" attribute works. It seems that it is failing to override it in the Edge browser.

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

It is not just in Edge that the jQuery custom placeholder was not working. It was also looking poor in Firefox. That's because the plugin needs CSS too. The comment about browser support says that the relevant CSS is in this SASS file: partials/_formBasics.scss. I recommended tweaking that SASS in order to support the new Edge browser.

As an example, this fiddle fixes it in both Edge and Firefox by adding some CSS. These are the CSS classes that the plugin uses:

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

You do not need to use them all. The fiddle added only the following. We hide the placeholder, align the label, and hide the label when appropriate.

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;
}

Fixed result in Edge