方法一:
JS代码:
window.οnlοad=function(){
var input=document.getElementById('input');
input.οnfοcus=function(){
if(this.value=='请输入密码'){
this.value='';
this.type='password';
};
};
input.οnblur=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,和其他浏览器上都可以实现这种效果。