快捷導(dǎo)航

當(dāng)達(dá)到輸入長(zhǎng)度時(shí)表單自動(dòng)切換焦點(diǎn)

更新時(shí)間：2014年04月06日 17:07:20 作者：

給每個(gè)字段限制輸入長(zhǎng)度，當(dāng)達(dá)到輸入長(zhǎng)度時(shí)自動(dòng)切換焦點(diǎn)，以增強(qiáng)表單的易用性,需要的朋友可以參考下

有時(shí)候會(huì)遇到和上面類似的表單字段。我們可以給每個(gè)字段限制輸入長(zhǎng)度，當(dāng)達(dá)到輸入長(zhǎng)度時(shí)自動(dòng)切換焦點(diǎn)，以增強(qiáng)表單的易用性

 
<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); 

})(); 

代碼其實(shí)很簡(jiǎn)單，判斷輸入字符串長(zhǎng)度是否和事件目標(biāo)的maxLength屬性長(zhǎng)度相等，若相等，且表單還有下一個(gè)字段，則自動(dòng)切換到下一個(gè)焦點(diǎn)。

簡(jiǎn)單說(shuō)下兩個(gè)屬性：

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

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

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

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

最后，我們?cè)賮?lái)看看上面的代碼，發(fā)現(xiàn)它還存在一些問(wè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)沒(méi)有，我們給每個(gè)字段添加了相同的事件處理程序。如果在復(fù)雜的web應(yīng)用程序中，對(duì)每個(gè)元素都采用這種方式，那么結(jié)果就會(huì)有數(shù)不清的代碼用于添加事件處理程序。此時(shí)，可以利用事件委托來(lái)解決這個(gè)問(wèn)題

其他代碼不變，將上面六行代碼換為下面的兩行會(huì)得到相同的結(jié)果，是不是感覺(jué)好多了呢

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

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

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

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