In this article I will explain with an example, how to make the HTML5 Placeholder attribute Cross Browser supported using jQuery i.e. make the HTML5 Placeholder attribute also work in browsers that do not support HTML5 using jQuery.
Earlier versions of browsers such as Internet Explorer versions IE7, IE8, IE9, etc. do not support HTML5 and hence the Placeholder attribute does not work even if specified.
Thus in browsers that do not support HTML5 Placeholder attribute, the functionality of HTML5 Placeholder attribute is mimicked with the help of jQuery ASPSnippets Placeholder plugin.
HTML Markup
The following HTML Markup consists of HTML Input TextBox, HTML Input Password TextBox and HTML TextArea elements. Each element is specified with the HTML Placeholder attribute.
Username:<br />
<input id="txtUsername" type="text" placeholder="Enter username." /><br />
Password:<br />
<input id="txtPassword" type="password" placeholder="Enter password." /><br />
Details:<br />
<textarea id="txtDetails" rows="2" cols="20" placeholder="Enter details."></textarea>
Applying the ASPSnippets Placeholder plugin
The jQuery and the ASPSnippets Placeholder plugin files are inherited and the ASPSnippets Placeholder plugin is applied to the HTML Input TextBox, HTML Input Password TextBox and HTML TextArea elements inside the document ready event handler of jQuery.
The ASPSnippets Placeholder plugin intelligently detects whether the browser supports HTML5 and if it does not support then the Placeholder is made to work using the plugin and if the browser supports HTML5 then the plugin disables itself to allow the elements use the default HTML5 Placeholder functionality.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="PlaceHolder.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtUsername, #txtPassword, #txtDetails").ASPSnippets_PlaceHolder();
});
</script>
Screenshots
Browser does not support HTML5 Placeholder attribute
![Cross Browser support for HTML5 Placeholder using jQuery]()
Browser supports HTML5 Placeholder attribute
![Cross Browser support for HTML5 Placeholder using jQuery]()
Demo
Downloads
