JavaScript文字框獲取焦點彈出tips

admin發表於2018-11-30
JavaScript

實際應用中，特別是表單填寫中，可能會遇到這樣的情況，當文字框或者密碼框獲取焦點的時候，彈出一個提示輸入內容的資訊層，下面通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  font-size:12px;
}
#box{
  margin:50px;
  position:relative;
}
ul{list-style:none}
ul li{height:30px;}
input{
  width:100px;
  height:20px;
  border:1px solid #ccc;
}
#tips{
  position:absolute;
  border:1px solid #ccc;
  padding:0px 3px;
  color:#f00;
  display:none;
  height:20px;
  line-height:20px;
  background:#fcfcfc
}
</style>
<script type="text/javascript">
function tips(id,str){
  var obj=document.getElementById(id);
  var l=obj.offsetLeft+120;
  var t=obj.offsetTop;
  document.getElementById("tips").innerHTML="提示："+str;
  document.getElementById("tips").style.left=l+"px";
  document.getElementById("tips").style.top=t+"px";
  document.getElementById("tips").style.display="block";
}
function outtips(){
  document.getElementById("tips").style.display='none';
}
window.onload=function(){
  var username=document.getElementById("username");
  var password=document.getElementById("password");
  username.onfocus=function(){
    tips('username','姓名長度最多16個字元');
  }
  username.onblur=function(){
    outtips();
  }
  password.onfocus=function(){
    tips('password','密碼長度必須在3-18位之間');
  }
  password.onblur=function(){
    outtips()
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="tips"></div>
  <ul>
    <li>姓名:<input type="text" id="username"/></li>
    <li>密碼:<input type="password" id="password"/></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下此效果的實現過程。

一.程式碼註釋:

（1）.function tips(id,str){}，此函式可以將提示層顯示，第一個引數是表單的id屬性值，比如這裡的文字框和密碼框，第二個引數是要在提示層中顯示的內容。

（2）.var obj=document.getElementById(id)，獲取元素物件。

（3）.var l=obj.offsetLeft+120，設定彈出層相對於box元素的水平座標。

（4）.var t=obj.offsetTop，設定彈出層相對於box元素的垂直座標。

（5）. document.getElementById("tips").innerHTML="提示："+str，設定提示層的內容。

（6）.document.getElementById("tips").style.left=l+"px"，設定彈出層的left屬性值。

（7）.document.getElementById("tips").style.top=t+"px"，設定彈出層的top屬性值。

（8）.document.getElementById("tips").style.display="block"，設定彈出層顯示，預設狀態下彈出層隱藏。

（9）.function outtips(){document.getElementById("tips").style.display='none';}，此函式可以設定彈出層隱藏。

（10）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（11）.var username=document.getElementById("username")，獲取指定的表單元素。

（12）.var password=document.getElementById("password")，和上面是同樣的道理。

（13）.username.onfocus=function(){tips('username','姓名長度最多16個字元');}，當文字框獲取焦點呼叫函式，彈出指定資訊。

二.相關閱讀:

（1）.offsetLeft參閱JavaScript offsetLeft屬性一章節。

（2）.focus事件參閱JavaScript focus 事件一章節。 

（3）.blur事件參閱JavaScript  blur 事件一章節。

相關文章