总结下网上的JS控制密码框获取焦点时文字消失，失去焦点时文字出现的方法

来源：互联网发布：网络营销策划是it吗编辑：程序博客网时间：2024/05/21 18:46

方法一：

JS代码：

window.onload=function(){　　var input=document.getElementById('input');　　input.onfocus=function(){　　　　if(this.value=='请输入密码'){　　　　　　this.value='';　　　　　　this.type='password';　　　　};　　};　　input.onblur=function(){　　　　if(!this.value){　　　　　　this.type = 'text';　　　　　　this.value = '请输入密码';　　　　};　　};　};

HTML代码：

<input type="text" value="请输入密码" id="input" />

这个方法测试了下，IE是不支持的，效果是鼠标移入字消失移出字出现，但是输入内容之后是明文显示，而且IE会提示：”SCRIPT256: 无法得到 type 属性。不支持该命令。“。

方法二：

HTML代码：

 <input type="password" name="password" placeholder="密码" />

不过placeholder是HTML5的用法，这种用法，鼠标移入移出字都是以灰色显示，只有输入内容之后字才消失，没有内容字重新显示，IE也不支持。
方法三：

JS代码：

function onload_body(){$("#password").focus(function(){<span style="white-space:pre"></span>    $(this).parent().hide();<span style="white-space:pre"></span>    $("#password_w").parent().show();<span style="white-space:pre"></span>    $("#password_w").focus();<span style="white-space:pre"></span>});<span style="white-space:pre"></span>$("#password_w").blur(function(){<span style="white-space:pre"></span>    if($("#password_w").val()==""){<span style="white-space:pre"></span>       $("#password_w").parent().hide();<span style="white-space:pre"></span>       $("#password").parent().show();<span style="white-space:pre"></span>    }<span style="white-space:pre"></span> });}$(document).ready(function(){      onload_body();});

HTML代码：

<div >     <input name=""  type="text" class="login_input" id="password"  value="请输入密码"/></div> <div style="display:none;">     <input name="" type="password" class="login_input" id="password_w" value="" /></div>

这种方法经过测试在IE，和其他浏览器上都可以实现这种效果。

0 0