ฉันเรียนรู้ HTML และ CSS เมื่อไม่นานมานี้เริ่มสนใจในพื้นที่นี้และเริ่มเรียนรู้การเขียนโปรแกรมขั้นสูงใน JavaScript (ฉบับที่สาม) ฉันได้เรียนรู้วันนี้และเรียนรู้เนื้อหาของเหตุการณ์และสคริปต์แบบฟอร์ม ไม่กี่วันที่ผ่านมาครูขอให้ฉันเขียนโค้ดชิ้นหนึ่ง: ในรูปแบบ JavaScript ให้ใช้ปุ่ม Enter และปุ่มเคลื่อนที่ขึ้นและลงไปทางซ้ายและขวาเพื่อย้ายโฟกัสจากกล่องข้อความหนึ่งไปยังกล่องข้อความก่อนหน้าหรือถัดไป ฉันพยายามเขียนโค้ดโดยใช้ความรู้ที่ฉันได้เรียนรู้จนถึงตอนนี้ ฉันพบปัญหาหลายอย่างในการเขียน: การคำนวณโมดูลัส; ใช้สิ่งนี้และอาร์กิวเมนต์เพื่อค้นหาเหตุการณ์ทริกเกอร์ภายในฟังก์ชั่น ใช้เมธอด addHandler () เพื่อเพิ่มตัวจัดการเหตุการณ์ในเหตุการณ์ ด้วยความช่วยเหลือของครูฉันแก้ไขปัญหาข้างต้น ฉันรู้สึกว่าฉันได้เรียนรู้ความรู้มากมายผ่านรหัสนี้ดังนั้นฉันจึงเขียนความคิดเห็นหลังจากเรียงลำดับและเผยแพร่
การคัดลอกรหัสมีดังนี้:
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> </title>
</head>
<body>
<form>
<div> <อินพุต type = "text"> </div>
<div> <อินพุต type = "text"> </div>
<div> <อินพุต type = "text"> </div>
<div> <อินพุต type = "text"> </div>
<div> <อินพุต type = "text"> </div>
<div> <อินพุต type = "ส่ง"> </div>
</form>
<script>
ฟังก์ชั่น is_down (e) {
var isdown;
E = E || window.event;
สวิตช์ (E.KeyCode) {
กรณีที่ 13: // ป้อนคีย์
กรณีที่ 39: // ย้ายปุ่มไปทางขวา
กรณีที่ 40: // ย้ายลงกุญแจ
isdown = true;
หยุดพัก;
กรณีที่ 37: // เลื่อนปุ่มไปทางซ้าย
กรณี 38: // เลื่อนคีย์ขึ้น
ISDOWN = FALSE;
หยุดพัก;
-
return isdown;
-
ฟังก์ชั่น key_up () {
// เมื่อเรียกฟังก์ชั่นฟังก์ชั่นตัวเองจะสร้างสิ่งนี้และอาร์กิวเมนต์
// ใช้สิ่งนี้และอาร์กิวเมนต์เพื่อค้นหาฟิลด์และเหตุการณ์ทริกเกอร์ตามลำดับ
var e = อาร์กิวเมนต์ [1];
return is_down (e) === ไม่ได้กำหนด? จริง: handle_element (นี่, is_down (e));
-
ฟังก์ชั่น handle_element (ฟิลด์, is_down) {
องค์ประกอบ var = field.form.elements;
สำหรับ (var i = 0, len = elements.length-1; i <len; i ++) {
if (field == องค์ประกอบ [i]) {
หยุดพัก;
-
-
i = is_down? (i + 1) % len: (i - 1) % len;
// (0 === i && is_down) -> กดปุ่มลงหลังจากที่กล่องข้อความสุดท้ายได้รับโฟกัส
// (-1 === i &&! is_down)-> กดปุ่ม UP หลังจากโฟกัสกล่องข้อความแรก
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
กลับมาจริง;
-
องค์ประกอบ [i] .focus ();
var element_arr = ['ปุ่ม', 'ส่ง', 'รีเซ็ต', 'select-one', 'textarea'];
if (element_arr.join (','). indexof (องค์ประกอบ [i] .type)> -1)
องค์ประกอบ [i] .Select ();
กลับเท็จ;
-
// ยกเลิกป้อนเหตุการณ์แบบฟอร์มการส่งเริ่มต้น
document.onkeydown = function (e) {
E = E || window.event;
if (e.keycode == 13) {
E.PreventDefault? e.preventDefault (): (e.returnValue = false);
-
-
// รู้จัก AddEventListener และ AttachEvent (เช่น) ข้ามเบราว์เซอร์
ฟังก์ชั่น addHandler (องค์ประกอบ, ประเภท, ตัวจัดการ) {
if (element.addeventListener)
Element.addeventListener (ประเภท, ตัวจัดการ, เท็จ);
อื่นถ้า (element.attachevent)
element.attachevent ("on" + type, handler);
อื่น
องค์ประกอบ ["on" + type] = handler;
-
องค์ประกอบ var = document.forms [0] .Elements;
สำหรับ (var i = 0, len = elements.length; i <len; i ++) {
// เพิ่มตัวจัดการเหตุการณ์ key_up สำหรับกิจกรรม keyup
addHandler (องค์ประกอบ [i], "keyup", key_up);
-
</script>
</body>
</html>
ข้างต้นเป็นเนื้อหาทั้งหมดของรหัส โดยส่วนตัวฉันรู้สึกว่าการเขียนค่อนข้างครอบคลุมและทุกสิ่งที่ควรนำมาพิจารณาได้รับการประมวลผล ฉันหวังว่าทุกคนจะชอบมัน