有時候會遇到和上面類似的表單欄位。我們可以給每個欄位限制輸入長度,當達到輸入長度時自動切換焦點,以增強表單的易用性
(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集合是一個有序列表,其中包含著表單中的所有字段,例如
、