文字框填內容寫達到指定長度自動切換

antzone發表於2018-06-02

文字框內容填寫達到指定長度自動切換在一定程度上提高網站的人性化程度。

下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下：

[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(){ 
  function tabForward(ev){ 
    var ev=ev || window.event; 
    var target = ev.target || ev.srcElement; 
 
    if(target.value.length===target.maxLength){ 
      var form = target.form; 
      for (var i=0,len=form.elements.length;i<len;i++){ 
        if(form.elements[i]===target){ 
          if(form.elements[i++]){ 
            form.elements[i++].focus(); 
          } 
          break; 
        } 
      } 
    } 
  } 
 
  var username = document.getElementById("username"); 
  var address = document.getElementById("address"); 
  var tel = document.getElementById("tel"); 
 
  username.onkeyup=tabForward; 
  address.onkeyup=tabForward; 
  tel.onkeyup=tabForward; 
}
</script>
</head> 
<body> 
<form id="myForm"> 
<input type="text" name="username" id="username" maxlength="3">- 
<input type="text" name="address" id="address" maxlength="3">- 
<input type="text" name="tel" id="tel" maxlength="4"> 
<input type="submit" value="點選提交"> 
</form> 
</body> 
</html>

當在文字框輸入內容達到指定長度的時候就能夠實現自動文字框切換效果。

一.程式碼註釋：

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

（2）function tabForward(ev){}，事件處理函式，引數是事件物件。

（3）.var ev=ev || window.event，實現事件物件的相容。

（4）.var target = ev.target || ev.srcElement，獲取事件源物件。

（5）.if(target.value.length===target.maxLength)，判斷文字框內容的長度是否已經達到文字框規定的最大輸入長度。

（6）.返回事件源物件所在的表單物件的引用。

（7）.for (var i=0,len=form.elements.length;i<len;i++)，遍歷每一個表單元素。

（8）.if(form.elements===target)，當前表單元素是事件源物件。

（9）.if(form.elements[i++])，如果還存在下一個表單元素，因為有可能第i個已經是最後一個了。

（10）.form.elements[i++].focus()，讓下一個元素獲取焦點。

（11）.break，跳出for迴圈。

（12）.username.onkeyup=tabForward，註冊onkeyup事件處理函式。

二.相關閱讀：

（1）.var ev=ev || window.event參閱var ev=window.event||ev的作用是什麼一章節。 

（2）.ev.target參閱javascript event.target一章節。 

（3）.ev.srcElement參閱javascript的event.srcElement一章節。 

相關文章