jquery html5 实现placeholder 兼容password ie6

Posted 2020-06-19

<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>