Placeholder cross browser

Hi guys, I think many of you are starting to use the wonderful new markup of HTML5, that present an useful attribute for input field that’s the placeholder attribute, it allows you to display text in a form input when it is empty and when it is not focused, but unfortunately it is not supported by all browsers yet.
This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.
Now with HTML5 placeholder, it is more semantic to use placeholder than value attribute, to make this cross-browsers we need libraries called modernizr and jquery.
To use this script in your website make sure to link correctly the libraries with the following code and put them just before the closing tag head, obiviously you have to download them or link to remote server where are placed:

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

Done! Now we can write the script that we will help us with cross broswer.
Write the following code inside the footer or in head but after the links for libraries:

<script type="text/javascript">
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>

We have done it! Now your placeholder can work with all browsers and you have to just stylized it using css.
Hoping this tutorial will be useful for all of you I want just to say goodbye and enjoy your creativity! Let’s think BIG!


Se ti è piaciuto questo articolo o ti è stato utile in qualche modo, lascia un commento, condividilo con i tuoi amici e seguimi sui social.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

La mia newsletter

Ricevi gratuitamente contenuti esclusivi e aggiornamenti sui nuovi articoli. Non saranno troppi! :)

    X