jquery Simple Placeholder Effect
Because IE6-IE9 does not support HTML5 in the placeholder, so I rely on jquery simple write A, for reference!
Let's look at the effect first! jsfiddle address as follows
View Effect links
The JS code is as follows:
/** JS placeholder * IE6-IE9 does not support placeholder in HTML5*/ functionPlaceholder (options) { This. config ={defaultcolor:' #ccc ', Curcolor:' #333 ', Targetelem:'. Placeholdercls ' }; This. Init (options);} Placeholder.prototype={constructor:placeholder, init:function(options) { This. config = $.extend ( This. config, Options | | {}); varSelf = This, _config=Self.config; $ (_config.targetelem). each (function(){ varSupportplaceholder = ' placeholder 'inchDocument.createelement (' Input '); if(!Supportplaceholder) { varDefaultValue = $ ( This). attr (' placeholder '); $( This). Focus (function(){ varPattern =NewRegExp ("^" + defaultvalue + "$|^$"); Pattern.test ($ ( This). Val ()) && $ ( This). Val ('). CSS (' Color ', _config.curcolor); }). blur (function(){ if($( This). val () = =DefaultValue) { $( This). CSS (' Color ', _config.defaultcolor); }Else if($( This). val (). length = = 0){ $( This). Val (defaultvalue). CSS (' Color ', _config.defaultcolor); }}). Trigger (' Blur '); } }); } };
The HTML code is as follows:
<formID= "Form1"> <H3>Simulate placeholder by value mode</H3> <P> <label for= "UserName1">User name:</label> <inputtype= "text"class= "Placeholdercls"placeholder= "Please enter user name"> </P> <P> <label for= "Address1">Address</label> <inputtype= "text"class= "Placeholdercls"placeholder= "Please enter Address"> </P> <P> <label for= "Remarks1">Notes</label> <textareaplaceholder= "Please enter notes"class= "Placeholdercls"></textarea> </P></form>
Code initialization:
<script> New Placeholder ({}); </script>