當(dāng)達(dá)到輸入長度時(shí)表單自動(dòng)切換焦點(diǎn)
更新時(shí)間：2014年04月06日 17:07:20 作者：
給每個(gè)字段限制輸入長度，當(dāng)達(dá)到輸入長度時(shí)自動(dòng)切換焦點(diǎn)，以增強(qiáng)表單的易用性,需要的朋友可以參考下
有時(shí)候會(huì)遇到和上面類似的表單字段。我們可以給每個(gè)字段限制輸入長度，當(dāng)達(dá)到輸入長度時(shí)自動(dòng)切換焦點(diǎn)，以增強(qiáng)表單的易用性
復(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);
})();
代碼其實(shí)很簡單，判斷輸入字符串長度是否和事件目標(biāo)的maxLength屬性長度相等，若相等，且表單還有下一個(gè)字段，則自動(dòng)切換到下一個(gè)焦點(diǎn)。
簡單說下兩個(gè)屬性：
target.form form屬性指向當(dāng)前字段所屬表單的指針，它是只讀的
form.elements elements屬性是表單中所有表單元素（字段）的集合。這個(gè)elements集合是一個(gè)有序列表，其中包含著表單中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每個(gè)表單字段在elements集合中的順序，與他們出現(xiàn)在標(biāo)記中的順序相同，可以按照位置和name特性來訪問它們。例如：
復(fù)制代碼 代碼如下:
var form = document.getElementById("myForm");
var textbox1 = form.elements[0];
var textbox2 = form.elements["tel2"];
最后，我們?cè)賮砜纯瓷厦娴拇a，發(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)沒有，我們給每個(gè)字段添加了相同的事件處理程序。如果在復(fù)雜的web應(yīng)用程序中，對(duì)每個(gè)元素都采用這種方式，那么結(jié)果就會(huì)有數(shù)不清的代碼用于添加事件處理程序。此時(shí)，可以利用事件委托來解決這個(gè)問題
其他代碼不變，將上面六行代碼換為下面的兩行會(huì)得到相同的結(jié)果，是不是感覺好多了呢
復(fù)制代碼 代碼如下:
var form = document.getElementById("myForm");
form.addEventListener("keyup", tabForward, false);
那什么又是事件委托呢，簡單說下原理，詳細(xì)內(nèi)容這里不解釋
事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。比如，這里的keyup事件，只需給form元素指定一個(gè)onkeyup事件處理程序，而不必給每個(gè)字段添加事件
相關(guān)文章
Javascript創(chuàng)建自定義對(duì)象 創(chuàng)建Object實(shí)例添加屬性和方法
創(chuàng)建自定義對(duì)象的最簡單的方式就是創(chuàng)建一個(gè)Object實(shí)例，然后再為它添加屬性和方法2012-06-06
獲取今天，昨天，本周，上周，本月，上月時(shí)間（實(shí)例分享）
本篇文章主要分享了獲取今天，昨天，本周，上周，本月，上月時(shí)間實(shí)例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
fabric.js實(shí)現(xiàn)diy明信片功能
這篇文章主要為大家詳細(xì)介紹了fabric.js實(shí)現(xiàn)diy明信片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
uniapp小視頻項(xiàng)目開發(fā)之滑動(dòng)播放視頻
最近在工作中遇到了一個(gè)視頻播放的需求,所以下面這篇文章主要給大家介紹了關(guān)于uniapp小視頻項(xiàng)目開發(fā)之滑動(dòng)播放視頻的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Bootstrap進(jìn)度條實(shí)現(xiàn)代碼解析
這篇文章主要為大家詳細(xì)介紹了Bootstrap進(jìn)度條的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JavaScript File分段上傳的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript使用Canvas繪制一個(gè)驗(yàn)證碼組件
驗(yàn)證碼,這一日常伴隨我們的要素,是我們?cè)诰€交互的重要安全保障,你的手機(jī)短信里是否被它占據(jù)半壁江山,今天我們就來聊聊如何在網(wǎng)頁上實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼組件,需要的朋友可以參考下2023-09-09
本文通過具體的示例來給大家詳細(xì)解釋了下javascript的連續(xù)賦值問題，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JavaScript基本類型和引用類型，基本類型中還包含了類型轉(zhuǎn)換，感興趣的小伙伴們可以參考一下2015-12-12
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變 推薦
以前做谷歌的小工具時(shí)，api里提供了一個(gè)很有用的函數(shù)，那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。2009-12-12