Detectamos si el navegador soporta placeholder con Modernizr y utilizamos un fallback con jQuery
Detectamos si el navegador soporta placeholder con Modernizr y utilizamos un fallback con jQuery
<!doctype html>
<html dir="ltr" lang="es">
<head>
<meta charset="UTF-8">
<title>HTML5 con Modernizr y jQuery</title>
<style>
header {color:red;}
</style>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function()
{
// check placeholder browser support
if (!Modernizr.input.placeholder)
{// set placeholder values
$(this).find('[placeholder]').each(function()
{
if ($(this).val() == '') // if field is empty
{
$(this).val( $(this).attr('placeholder') );
}
});// focus and blur of placeholders
$('[placeholder]').focus(function()
{
if ($(this).val() == $(this).attr('placeholder'))
{
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function()
{
if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))
{
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});// remove placeholders on submit
$('[placeholder]').closest('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
if ($(this).val() == $(this).attr('placeholder'))
{
$(this).val('');
}
})
});}
});
</script>
</head>
<body>
<header>
<h1>HTML5 con Modernizr y jQuery</h1>
</header>
<article>
<p>Detectamos si el navegador soporta <code>placeholder</code> con Modernizr y utilizamos un fallback con jQuery</p>
<form><input type="text" placeholder="muéstrame IE"></form>
</article>
</body>
</html>