If you are a bleeding edge developer chances are you are taking advantage of the new placeholder attribute that can be used with form elements. It can be used on text, textarea, search, url, tel, email, and password fields. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. The following snippet can be ran to test for placeholder support, fallback older browsers, and ensure default values are not submitted in those older browsers.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
February 24, 2013
February 3, 2013
Glad to see other people considering fallbacks for the placeholder attribute! I've recently implemented support for it into my superLabels plugin which should also work in older browsers!
Nice snippet!
One thing to be aware of is that $('[placeholder]').each is the same as $('*[placeholder]').each. You're iterating on every single element and testing against the existence of the placeholder attribute. I'd suggest using $('input[placeholder]') instead.
Nice catch Gabriel, I've updated the snippet.
Hey How to use this. can you give an example..?
Nice one, smaller than the other script I used to put on my sites (https://github.com/danielstocks/jQuery-Placeholder/blob/master/jquery.placeholder.js).
However, I see that jQuery.placeholder.js handle password fields in a specific way, what's your point on this ? (I don't reallly know what's the difference).
nice and simple snippet!. may be there's much more to cover to make it a real polyfill. just for you to check it out and try this one
https://github.com/dciccale/placeholder-enhanced if you want.
Good question, what I posted will not represent passwords as anything other than ******** instead of replacing the element with a plain text field for the default state. If you don't have password fields that isn't a problem though. I may update the script to include a password mechanism.
Not sure it is very usefull. I mean, seeing "****" as a placeholder is really straight foward;
I guess everybody knows that "****" means "password".
Including a password mechanism into you script will make it heavier. (And I like <1ko scripts!!)
You should've do the same for textarea though.
Good catch, now targeting them additionally since I am not using the global [placeholder] lookup. Thanks.
It doesn't wait until you start typing before removing the placeholder.
This is the one I use:
https://github.com/ginader/HTML5-placeholder-polyfill/blob/master/src/placeholder_polyfill.jquery.js
Thanks for sharing. There are definitely other options however even modern browsers haven't been consistent in how they handled clearing elements, for instance FireFox 14 cleared immediately and now FireFox 15 doesn't until you type. To me the simplicity of a basic fallback outweighs the slight cosmetic difference.
I didnt get it !!!!!!!!!
hi
how to popup webpage in asp.net
Hi there. Really a great post. HTML 5 and <a href="http://www.zealousweb.net/web-development/asp-dotnet-development-india/">.net development</a> just allure the design world. Thanks for sharing it.
These jquery are very normal and most of the <a href="http://www.expertsfromindia.com/html5-designer.htm">html5 designers</a> faces these queries…..
Thanks for the Information. Good one. Regards <a href="http://studentsarea.com/">Education Portal </a>
It is really very interesting blog post; HTML 5 is win cause of it is a new technology that allows developers to build rich web-based apps that run on any device via a standard web browser. Thanks for sharing information.
Thanks a lot for this snippet! it’s clean, clever and just makes sense!
have a nice day!