有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度,当达到输入长度时自动切换焦点,以增强表单的易用性
首頁 > web前端 > js教程 > 達到輸入長度時表單自動切換焦點_javascript技巧

達到輸入長度時表單自動切換焦點_javascript技巧

WBOY
發布: 2016-05-16 16:53:13
原創
990 人瀏覽過
達到輸入長度時表單自動切換焦點_javascript技巧
有時候會遇到和上面類似的表單欄位。我們可以給每個欄位限制輸入長度,當達到輸入長度時自動切換焦點,以增強表單的易用性
複製程式碼 程式碼如下:


-
-






複製程式碼 程式碼如下:

(function () {
function tabForward(e) {
e = e || window ;
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 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");
addEventListener("keyup", tabForward, false);
textbox2.addEventListener("keyup", tabForward, false);
textbox3.addEventListener("keyup", tabForward, false);

)();

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

簡單說下兩個屬性:

target.form form屬性指向目前欄位所屬表單的指針,它是唯讀的

form.elements elements屬性是表單中所有表單元素(欄位)的集合。這個elements集合是一個有序列表,其中包含著表單中的所有字段,例如
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板