實現密碼框預設文字效果例項程式碼

admin發表於2017-04-15
密碼

大家都知道很多文字框在預設情況下都有預設的提示文字，例如"請輸入姓名"之類的語言，當點選文字框的時候，會清除提示語，比較人性化。但是在密碼框中實現此效果可能就有點麻煩了，因為密碼框不是以明文顯示的，下面就介紹一下程式碼例項解決此問題。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章