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.
- Add script reference to
jQueryand plugin files in
headsection of HTML document.
- Then call the
placeholderfallback()plugin for form fields where falback support is required. You can link the form fields using any usual element identity attribute such as
classor element itself.
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
class like so.
$('#firstNameField, #lastNameField, #emailField').placeholderfallback();
Here is detailed example use:
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.