เมื่อถึงความยาวอินพุตแบบฟอร์มจะสลับโฟกัสโดยอัตโนมัติ

บางครั้งคุณจะพบฟิลด์ฟอร์มคล้ายกับที่ข้างต้น เราสามารถ จำกัด ความยาวอินพุตสำหรับแต่ละฟิลด์และสลับโฟกัสโดยอัตโนมัติเมื่อถึงความยาวอินพุตเพื่อเพิ่มความสะดวกในรูปแบบ

การคัดลอกรหัสมีดังนี้:

<form id = "myform">

<อินพุต type = "text" name = "tel1" id = "txt1" maxlength = "3">-

<อินพุต type = "text" name = "tel2" id = "txt2" maxlength = "3">-

<อินพุต type = "text" name = "tel3" id = "txt3" maxlength = "4">

<br>

<input type = "submit" value = "ส่ง">

</form>

การคัดลอกรหัสมีดังนี้:

(การทำงาน () {

ฟังก์ชั่น tabforward (e) {

e = e || window.event;

var target = e.target ||

if (target.value.length === target.maxLength) {

var form = target.form;

สำหรับ (var i = 0, len = form.elements.length; i <len; i ++) {

if (form.elements [i] === เป้าหมาย) {

if (form.elements [i ++]) {

Form.Elements [i ++]. focus ();

-

หยุดพัก;

-

-

-

-

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

-

จริง ๆ แล้วรหัสนั้นง่ายมาก โฟกัสถัดไป

พูดคุยสั้น ๆ เกี่ยวกับสองคุณลักษณะ:

คุณสมบัติของฟอร์ม Target Form ชี้ไปที่แบบฟอร์มที่เป็นของฟิลด์ปัจจุบัน

แอตทริบิวต์ Elements Elements Form.elements เป็นชุดขององค์ประกอบทั้งหมด (ฟิลด์) ในรูปแบบ คอลเลกชันขององค์ประกอบนี้เป็นรายการที่สั่งซื้อที่มีฟิลด์ทั้งหมดในแบบฟอร์มเช่น <put>, <PloyArea>, <putkle>, และ <tialstet> แต่ละฟิลด์ฟิลด์อยู่ในลำดับที่ปรากฏในแท็กในลำดับเดียวกับที่พวกเขาสามารถเข้าถึงได้โดยแอตทริบิวต์ตำแหน่งและชื่อ ตัวอย่างเช่น:

การคัดลอกรหัสมีดังนี้:

var form = document.getElementById ("myform");

var textbox1 = form.elements [0];

var textbox2 = form.elements ["tel2"];

สุดท้ายมาดูรหัสด้านบนและพบว่ายังมีปัญหาบางอย่างเช่นรหัสนี้

การคัดลอกรหัสมีดังนี้:

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

ไม่พบเราเพิ่มตัวจัดการเหตุการณ์เดียวกันในแต่ละฟิลด์ หากคุณใช้วิธีนี้สำหรับแต่ละองค์ประกอบในเว็บแอปพลิเคชันที่ซับซ้อนจะมีรหัสนับไม่ถ้วนสำหรับการเพิ่มตัวจัดการเหตุการณ์เป็นผลลัพธ์ ในเวลานี้การมอบหมายงานสามารถใช้เพื่อแก้ปัญหานี้ได้

รหัสอื่นยังคงไม่เปลี่ยนแปลง

การคัดลอกรหัสมีดังนี้:

var form = document.getElementById ("myform");

form.addeventListener ("keyup", tabforward, false);

แล้วค่าคอมมิชชั่นของเหตุการณ์คืออะไร

การมอบหมายกิจกรรมใช้ประโยชน์จากฟองสบู่และระบุตัวจัดการเหตุการณ์เพื่อจัดการเหตุการณ์ทั้งหมดทุกประเภท ตัวอย่างเช่นสำหรับเหตุการณ์ Keyup ที่นี่คุณจะต้องระบุตัวจัดการเหตุการณ์ onkeyup ไปยังองค์ประกอบฟอร์มโดยไม่ต้องเพิ่มเหตุการณ์ในแต่ละฟิลด์