Skip to content

Instantly share code, notes, and snippets.

@Badgerati
Created April 4, 2013 21:15
Show Gist options
  • Save Badgerati/5314434 to your computer and use it in GitHub Desktop.
Save Badgerati/5314434 to your computer and use it in GitHub Desktop.
JavaScript to allow text input fields in IE browsers to have placeholders. Note: the control itself must have the placehoder attribute field present, and jQuery is required.
$(document).ready(
function () {
var ie = navigator.userAgent.match(/msie/i);
if (ie != null) {
//fetch all input elements
var elements = document.getElementsByTagName('input');
var element;
//loop through each, giving appropriates ones placeholders
for (var i = 0; i < elements.length; i++) {
element = elements[i];
//only if the input has a placeholder attribute
if ($(element).attr('placeholder')) {
element.style.color = '#999';
element.value = $(element).attr('placeholder');
//text input fields
if (element.type.toLowerCase() == 'text') {
$(element).focus(function () {
if (this.value == $(this).attr('placeholder')) {
if (this.createTextRange) {
var range = this.createTextRange();
range.move('character', 0);
range.select();
}
}
});
$(element).blur(function () {
if (this.value.length == 0) {
this.style.color = "#999";
$(this).val($(this).attr('placeholder'));
}
});
$(element).keydown(function () {
if (this.value == $(this).attr('placeholder')) {
this.style.color = '#000';
this.value = '';
}
});
$(element).keyup(function () {
if (this.value.length == 0) {
this.style.color = "#999";
$(this).val($(this).attr('placeholder'));
if (this.createTextRange) {
var range = this.createTextRange();
range.move('character', 0);
range.select();
}
}
});
}
//password input fields
if (element.type.toLowerCase() == 'password') {
element.type = 'text';
$(element).focus(function () {
if (this.value == $(this).attr('placeholder')) {
if (this.createTextRange) {
var range = this.createTextRange();
range.move('character', 0);
range.select();
}
}
});
$(element).blur(function () {
if (this.value.length == 0) {
this.style.color = "#999";
$(this).val($(this).attr('placeholder'));
this.type = 'text';
}
});
$(element).keydown(function () {
if (this.value == $(this).attr('placeholder')) {
this.style.color = '#000';
this.value = '';
this.type = 'password';
}
});
$(element).keyup(function () {
if (this.value.length == 0) {
this.style.color = "#999";
$(this).val($(this).attr('placeholder'));
this.type = 'text';
if (this.createTextRange) {
var range = this.createTextRange();
range.move('character', 0);
range.select();
}
}
});
}
}
}
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment