在做登录的时候我们都会用到文本框中显示要输入的默认提示,以前都是用js判断的比较麻烦,还有一个就是password是通过两个input框切换实现的,还好html5提供了一个属性placeholder,在input类型的框上可以起到占位符的效果,但现在还不是所有的浏览器都支持很html5,下面就通过jquery、html5来实现可以兼容多种浏览器的placeholder效果。
大致思路:
1.判断浏览器是否支持html5的placeholder,支持就直接使用该属性。
2.不支持就通过jquery来添加blur focus事件
3.对password框的特使处理
运行前要引入jquery类库,
<style type="text/css"> /* 设置提示文字颜色 */ ::-webkit-input-placeholder { color: #838383; } :-moz-placeholder { color: #838383; } .placeholder { color: #ccc; } </style> 登录用户名、密码文字提示,鼠标离开显示文字 html5 and jquery<br/> <br/> 账号:<input type="text" name="email" placeholder = '用户账号' /><br/> <br/> 密码:<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/> <script type="text/javascript"> //判断浏览器是否支持 placeholder属性 function isPlaceholder(){ var input = document.createElement('input'); return 'placeholder' in input; } if (!isPlaceholder()) {//不支持placeholder 用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框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换 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>?
?