Edge Browser input placeholder (text duplicated) - html

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