javascript input文字框新增提示文字效果

antzone發表於2017-04-07
JavaScript

這種效果的應用應該非常的多的了。也就是當點選文字框的時候，能夠清除裡面的提示文字，如果沒有填寫任何內容，焦點離開的時候，再會恢復到提示文字狀態，本章節分享一個對文字框的批量操作，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
input{
  width:200px; 
  height:24px;
  line-height:24px; 
  border:1px solid #999;
  background:#ccc; 
  margin:15px 0 0 100px;
  padding:4px; 
  color:#666;
}
.current{
  background:#E0FEE4;
  border:1px solid #093;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var aInp=document.getElementsByTagName('input');
  var y=0;
  var sArray=[];
  for(y=0; y<aInp.length; y++){
    aInp[y].index=y;
    sArray.push(aInp[y].value);
    aInp[y].onfocus=function(){
      if(sArray[this.index]==aInp[this.index].value){
        aInp[this.index].value='';
      }
      aInp[this.index].className='current';
    };
    aInp[y].onblur=function(){
      if(aInp[this.index].value==''){
        aInp[this.index].value=sArray[this.index];
      }
      aInp[this.index].className='';
    };
  }
}
</script>
</head>
<body>
<input name="" type="text" value="請輸入姓名："/><br />
<input name="" type="text" value="請輸入暱稱："/><br />
<input name="" type="text" value="輸入驗證碼："/><br />
<input name="" type="text" value="請輸入手機號碼："/><br />
<input name="" type="text" value="請輸入電子郵件："/>
 
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。（2）.var aInp=document.getElementsByTagName('input'),獲取input元素集合。

（3）.var y=0,宣告一個變數並賦值為0。

（4）.var sArray=[],宣告一個陣列用來存放文字框中原來的提示文字。

（5）.for(y=0;y<aInp.length;y++){}，遍歷每一個input元素。

（6）.aInp[y].index=y,為當前input元素新增一個index屬性，並賦值為當前的索引。

（7）.sArray.push(aInp[y].value),將當前input元素的value值存入陣列。

（8）.aInp[y].onfocus=function(){

  if(sArray[this.index]==aInp[this.index].value){

    aInp[this.index].value='';

  }

  aInp[this.index].className='current';

},為每一個input元素註冊onfocus事件處理函式。

判斷如果當前input元素的原來value值和當前的value相同，那麼就清空文字框。

並且設定當前文字框的class屬性值為current。

（9）.aInp[y].onblur=function(){

  if(aInp[this.index].value==''){

    aInp[this.index].value=sArray[this.index];

  }

  aInp[this.index].className='';

},註冊onblur事件處理函式。

如果當前文字框的value值等於空，那麼就恢復預設的value值。

並且將class屬性值設定為空。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.push()方法可以參閱javascrip push()一章節。

（3）.onfocus事件可以參閱javascript focus事件一章節。

（4）.className屬性可以參閱js className一章節。

（5）.onblur事件可以參閱javascript blur事件一章節。

相關文章