Menu
What do you all use to support placeholder attributes in browsers?
Currently, am using:
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
Have also tried this plugin to no avail:
https://github.com/danbentley/placeholder
But it doesn't seem to work with IE... More specifically IE 8. Any other suggestions / alternatives?
Should I forget about the placeholder attribute for now?
479
Definition and Usage The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
HTML5 includes a placeholder attribute that allows you to declaratively specify this temporary text.
You're right that IE8 doesn't support the placeholder attribute. placeholder is part of the HTML5 spec, and IE8 was released a long time before HTML5 was thought of.
The best way to deal with it in a seamless manner is to use a tool like Modernizr to detect whether the browser has support for the placeholder feature, and run a JS polyfill script if it isn't supported.
if(!Modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
There are numerous placeholder polyfill scripts out there to download. Pick one which makes use of the placeholder attribute so that you only need to define the placeholder string in one place for all browsers. Here's one you could try: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Hope that helps.
108
Here's code straight from my project that works natively in chrome and uses the polyfill in IE8... there's an alert in here for testing that shows when the polyfill is being called.
You need modernizr loaded as a prerequisite to using this code but a simple script include in your <head> section will do.
<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('');
}
})
});
alert("no place holders");
}
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
