欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

當達到輸入長度時表單自動切換焦點

 更新時間：2014年04月06日 17:07:20   作者：  
給每個字段限制輸入長度，當達到輸入長度時自動切換焦點，以增強表單的易用性,需要的朋友可以參考下

有時候會遇到和上面類似的表單字段。我們可以給每個字段限制輸入長度，當達到輸入長度時自動切換焦點，以增強表單的易用性
復(fù)制代碼 代碼如下:

<form id="myForm">
<input type="text" name="tel1" id="txt1" maxlength="3">-
<input type="text" name="tel2" id="txt2" maxlength="3">-
<input type="text" name="tel3" id="txt3" maxlength="4">
<br>
<input type="submit" value="Submit">
</form>

復(fù)制代碼 代碼如下:

(function () {
function tabForward(e) {
e = e || window.event;
var target = e.target || e.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 textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2");
var textbox3 = document.getElementById("txt3");

textbox1.addEventListener("keyup", tabForward, false);
textbox2.addEventListener("keyup", tabForward, false);
textbox3.addEventListener("keyup", tabForward, false);

})();

代碼其實很簡單，判斷輸入字符串長度是否和事件目標的maxLength屬性長度相等，若相等，且表單還有下一個字段，則自動切換到下一個焦點。

簡單說下兩個屬性：

target.form form屬性指向當前字段所屬表單的指針，它是只讀的

form.elements elements屬性是表單中所有表單元素（字段）的集合。這個elements集合是一個有序列表，其中包含著表單中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每個表單字段在elements集合中的順序，與他們出現(xiàn)在標記中的順序相同，可以按照位置和name特性來訪問它們。例如：
復(fù)制代碼 代碼如下:

var form = document.getElementById("myForm");
var textbox1 = form.elements[0];
var textbox2 = form.elements["tel2"];

最后，我們再來看看上面的代碼，發(fā)現(xiàn)它還存在一些問題，比如這段代碼
復(fù)制代碼 代碼如下:

var textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2");
var textbox3 = document.getElementById("txt3");

textbox1.addEventListener("keyup", tabForward, false);
textbox2.addEventListener("keyup", tabForward, false);
textbox3.addEventListener("keyup", tabForward, false);

發(fā)現(xiàn)沒有，我們給每個字段添加了相同的事件處理程序。如果在復(fù)雜的web應(yīng)用程序中，對每個元素都采用這種方式，那么結(jié)果就會有數(shù)不清的代碼用于添加事件處理程序。此時，可以利用事件委托來解決這個問題

其他代碼不變，將上面六行代碼換為下面的兩行會得到相同的結(jié)果，是不是感覺好多了呢
復(fù)制代碼 代碼如下:

var form = document.getElementById("myForm");
form.addEventListener("keyup", tabForward, false);

那什么又是事件委托呢，簡單說下原理，詳細內(nèi)容這里不解釋

事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。比如，這里的keyup事件，只需給form元素指定一個onkeyup事件處理程序，而不必給每個字段添加事件

相關(guān)文章

最新評論