Form表单input密码框提示信息的实现方法

2015-03-17 17:23:21 |  分类:Javascript

之前做过一个这样的功能,要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input  type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下:

<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/>

<input style="display: none;" type="password"  onblur="changeTip(this);" id="pass" placeholder="" name="pass" value=""/>

<script type="text/javascript">
        function changeTip(th){
            var passText = document.getElementById('passText');
            var pass = document.getElementById('pass');
            if(th.id == 'pass'){
               
                if(th.value == '' || th.value.length == 0 ){
                    passText.style.display='';
                    pass.style.display='none';
                }
               
            }else{
                passText.style.display='none';
                pass.style.display='';
                pass.focus();
            }
           
           
        }
       
</script>

       

 

下面介绍一下html5的实现方法,html5实现起来相当的简单,只需要一个属性就可以完成上面一大段的代码的功能,用html5的一个 placeholder 属性就解决了.代码如下:

<input type="password"  id="pass5" placeholder="请输入密码" name="pass5" value=""/>

 

 

 

2015-03-17 17:23:21 |  阅读( 0 ) |  评论( 0)
分享到: