相容所有瀏覽器的密碼框輸入提示效果

admin發表於2017-04-15
瀏覽器密碼

通常在使用者名稱或者密碼輸入的地方通常有輸入提示語。

如果不考慮相容性問題可以使用<input>標籤的placeholder屬性實現。

但是如果考慮相容問題的話，就稍微麻煩一些，問題主要出在密碼框身上，因為密碼是非明文顯示的，所以提示語也無法被使用者正常檢視，下面就通過一段程式碼例項介紹一下如何實現相容所有瀏覽器的密碼輸入提示功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#pw {
  display:none;
}
#pw, #txt {
  width:180px;
  height:25px;
}
</style>
<script>
window.onload = function () {
  var otxt = document.getElementById("txt");
  var opw = document.getElementById("pw");
  otxt.onfocus = function () {
    otxt.style.display = "none";
    opw.style.display = "block";
  }
  opw.onblur = function () {
    if (this.value == "") {
      this.style.display = "none";
      otxt.style.display = "block";
    }
  }
};
</script>
</head>
<body>
<input type="text" value="請輸入密碼" id="txt"/>
<input type="password" id="pw"/>
</body>
</html>

相關文章