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

有時(shí)候會遇到和上面類似的表單字段。我們可以給每個(gè)字段限制輸入長度,當(dāng)達(dá)到輸入長度時(shí)自動切換焦點(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>
(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è)字段,則自動切換到下一個(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特性來訪問它們。例如:
var form = document.getElementById("myForm");
var textbox1 = form.elements[0];
var textbox2 = form.elements["tel2"];
最后,我們再來看看上面的代碼,發(fā)現(xiàn)它還存在一些問題,比如這段代碼
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)用程序中,對每個(gè)元素都采用這種方式,那么結(jié)果就會有數(shù)不清的代碼用于添加事件處理程序。此時(shí),可以利用事件委托來解決這個(gè)問題
其他代碼不變,將上面六行代碼換為下面的兩行會得到相同的結(jié)果,是不是感覺好多了呢
var form = document.getElementById("myForm");
form.addEventListener("keyup", tabForward, false);
那什么又是事件委托呢,簡單說下原理,詳細(xì)內(nèi)容這里不解釋
事件委托利用了事件冒泡,只指定一個(gè)事件處理程序,就可以管理某一類型的所有事件。比如,這里的keyup事件,只需給form元素指定一個(gè)onkeyup事件處理程序,而不必給每個(gè)字段添加事件
相關(guān)文章
在layui中對table中的數(shù)據(jù)進(jìn)行判斷(0、1)轉(zhuǎn)換為提示信息的方法
今天小編就為大家分享一篇在layui中對table中的數(shù)據(jù)進(jìn)行判斷(0、1)轉(zhuǎn)換為提示信息的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript 字符 Escape,encodeURI,encodeURIComponent
下面是對字符串編碼轉(zhuǎn)換功能函數(shù)大家,大家可以根據(jù)實(shí)際需要選擇使用。2009-07-07淺析為什么a="abc" 不等于 a=new String("abc")
這篇文章主要介紹了為什么a="abc" 不等于 a=new String("abc"),需要的朋友可以參考下2017-10-10JavaScript利用正則表達(dá)式來禁止鍵盤輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來禁止鍵盤輸入數(shù)字,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
本文給大家分享的是純js實(shí)現(xiàn)的類似flash里的圖片環(huán)繞旋轉(zhuǎn)效果,非常炫酷,有需要的小伙伴可以參考下。2015-04-04uniapp使用百度地圖的保姆式教學(xué)(適合初學(xué)者!)
公司項(xiàng)目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學(xué),文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JavaScript實(shí)現(xiàn)動畫打開半透明提示層的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動畫打開半透明提示層的方法,涉及javascript操作DOM的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04