实现密码框默认文字效果实例代码

快乐打工仔 分类:实例代码

大家都知道很多文本框在默认情况下都有默认的提示文本,例如"请输入姓名"之类的语言,当点击文本框的时候,会清除提示语,比较人性化。但是在密码框中实现此效果可能就有点麻烦了,因为密码框不是以明文显示的,下面就介绍一下代码实例解决此问题。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript"> 
window.onload=function()
{
  var tx=document.getElementById("tx");
  var pwd=document.getElementById("pwd"); 
  tx.onfocus=function()
  { 
    if(this.value!="请输入密码") return; 
    this.style.display="none"; 
    pwd.style.display=""; 
    pwd.value=""; 
    pwd.focus(); 
  } 
  pwd.onblur=function()
  { 
    if(this.value!="") return; 
    this.style.display="none"; 
    tx.style.display=""; 
    tx.value="请输入密码"; 
  }  
}
</script>
</head>
<body>
<input type="text" value="请输入密码" id="tx" style="width:100px;" />
<input type="password" id="pwd" style="display:none;width:100px;"  />
</body>
</html>

实现密码框默认文字效果实例代码,这样的场景在实际项目中还是用的比较多的,关于实现密码框默认文字效果实例代码就介绍到这了。

实现密码框默认文字效果实例代码属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容