HTML Form fields placeholders can be very useful in terms of providing accessibility as well as saving space on field labels. Unfortunately not all browsers support it – especially when providing a support for user coming from older versions of Microsoft Internet Explorer. To tackle this issue and automate the support, I created this small jQuery plugin that takes care of placeholders for form fields in incompatible browsers.
To use the plugin, simple follow the steps in following example.
jQuery
and plugin files in head
section of HTML document.<script src="path/to/jQuery.js"></script>
<script src="path/to/jquery.placeholderfallback.js"></script>
placeholderfallback()
plugin for form fields where falback support is required. You can link the form fields using any usual element identity attribute such as id
, class
or element itself.$('#firstNameField').placeholderfallback();
$('.first-name-field').placeholderfallback();
$('input[type=text]').placeholderfallback();
Latter will provide fallback support to all input
fields with text
attribute. However, if you need to call the fallback support for multiple elements then you can pass multiple id
and/or class
like so.
$('#firstNameField, #lastNameField, #emailField').placeholderfallback();
Here is detailed example use:
<form>
<input type="text" id="firstNameField" placeholder="First Name" />
<input type="text" id="lastNameField" placeholder="Last Name" />
<input type="email" id="emailField" placeholder="Email address" />
</form>
<!--[if lt IE 10]>
<script>
(function() {
$('#firstNameField, #lastNameField, #emailField').placeholderfallback();
})();
</script>
<![endif]-->
Finally, in this detailed example, we have wrapped the plugin call between Internet Explorer conditional tags so it only works when it actually is required.
https://github.com/jabranr/jquery.placeholderfallback.js