JQuery HTML5 placeholder fix
Wednesday, March 17th, 2010
One of the nifty new features of HTML5 is the placeholder for forms which is added by putting in a placeholder value.
<input type="email" placeholder="example@kamikazemusic.com" />
So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.
To use this make sure you’ve included the jQuery and Modernizr files and then pop in the bit of code below or download and include the file.
(This is only tested so far with Modernizr v1.1 and jQuery v1.4.2)
$(document).ready(function() {
if(!Modernizr.input.placeholder){
$("input").each(
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
}
});
Want to read more articles like this? Subscribe to our RSS feed.
Previous post ⇒
The Randomiser Interview #8 – Inayaili De León
⇐ Next Post
Do you want a great web job?
Tags: HTML5, jQuery, Modernizr, placeholder
Filed under Quick Tips.You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Follow me on twitter - @dsparks83
gr8 information
Thanks for code
Without jQuery:
function initInputPlaceholders() {
function onFocus() {
if(this.value == this.getAttribute(‘placeholder’)) {
this.value = ”;
}
}
function onBlur() {
if(this.value == ”) {
this.value = this.getAttribute(‘placeholder’);
}
}
var inputs = document.getElementsByTagName(‘input’)
, i, l = inputs.length
, input;
for(i = 0; i < l; i += 1) {
input = inputs[i];
if(input.value == '' && input.hasAttribute('placeholder')) {
input.value = input.getAttribute('placeholder');
input.addEventListener('focus', onFocus, false);
input.addEventListener('blur', onBlur, false);
}
}
}
just call the function on load or on domready
note: does not work in IE
This works better since it handles clearing the placeholder on submit
$(document).ready(function() {
if (Modernizr.input.placeholder)
return;
$(‘input[placeholder]‘).focus(function() {
if ($(this).hasClass(‘placeholder’)) {
if ($(this).val() == $(this).attr(‘placeholder’))
$(this).val(”);
$(this).removeClass(‘placeholder’);
}
});
$(‘input[placeholder]‘).keypress(function() {
if ($(this).hasClass(‘placeholder’)) {
if ($(this).val() == $(this).attr(‘placeholder’))
$(this).val(”);
$(this).removeClass(‘placeholder’);
}
});
$(‘input[placeholder]‘).blur(function() {
if ($(this).val() != ”)
return;
$(this).addClass(‘placeholder’);
$(this).val($(this).attr(‘placeholder’));
});
$(‘input[placeholder]‘).each(function() {
if ($(this).val() != ” && $(this).val() != $(this).attr(‘placeholder’))
return;
$(this).val($(this).attr(‘placeholder’)).addClass(‘placeholder’);
});
$(‘form’).submit(function() {
$(this).find(“.placeholder”).each(function() {
$(this).removeClass(‘placeholder’);
$(this).val(”);
});
});
});
if(this.value == this.getAttribute(‘placeholder’)) {
this.value = ”;
}
}
function onBlur() {
if(this.value == ”) {
this.value = this.getAttribute(‘placeholder’);