<style type = "text / CSS"> / * prompt text color set * / :: - {placeholder WebKit-INPUT- Color: # 838 383; } : {-moz-placeholder Color: # 838 383; } .placeholder { Color: #ccc; } </ style> login user name, password, text prompts, mouse leaves the display text html5 and jquery account: <input type = "text" name = "email" placeholder = ' user account' /> password: <input type = "password" name = "password " placeholder = ' password' AutoComplete = "OFF" /> <Script type = "text / JavaScript"> // determines whether the browser supports placeholder property function isPlaceholder () { var = INPUT Document. the createElement ( 'INPUT'); return 'placeholder' in input; } (! isPlaceholder ()) {// do not support the IF placeholder accomplished with jquery $(document).ready(function() { if(!isPlaceholder()){ $("input").not("input[type='password']").each(//把input绑定事件 排除password框 function(){ if($(this).val()=="" && $(this).attr("placeholder")!=""){ $(this).val($(this).attr("placeholder")); $(this).focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }); $(this).blur(function(){ if($(this).val()=="") $(this).val($(this).attr("placeholder")); }); // password for special treatment to create a text block 1. The block 2 to obtain a focus switching loses focus and } }); var pwdField = $ ( "INPUT [type = password]"); var = pwdVal pwdField.attr ( 'placeholder'); pwdField.after ( '<INPUT ID = "pwdPlaceholder" type = "text" value =' + + pwdVal 'AutoComplete = "OFF" />'); var pwdPlaceholder = $ ( '# pwdPlaceholder'); pwdPlaceholder.show (); pwdField.hide (); pwdPlaceholder.focus (function () { pwdPlaceholder.hide (); pwdField.show (); pwdField.focus (); }); pwdField.blur (function () { IF (pwdField.val () == '') { pwdPlaceholder.show(); pwdField.hide(); } }); } }); } </script>
jquery html5 compatible realize placeholder password ie6
Guess you like
Origin www.cnblogs.com/xieyongbin/p/11076172.html
Ranking