บทความนี้อธิบายวิธีการของ JavaScript ที่ควบคุมรูปแบบเวลาอินพุต แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ฉันเคยสร้างอินพุต JavaScript เพื่อควบคุมรูปแบบเวลาส่วนใหญ่ใช้ Keydown และ KeyUp Events แต่ฉันรู้สึกว่าการเขียนนั้นซับซ้อนมากและมีข้อบกพร่อง
วันนี้ฉันได้เรียนรู้เกี่ยวกับความแตกต่างระหว่างเหตุการณ์คีย์นิดและคีย์ดาวน์และคีย์อัพ มันมีดังนี้ (เพิ่งรู้มากในขณะนี้):
Keydown: ทริกเกอร์เมื่อกดปุ่ม ผ่านเหตุการณ์คุณสามารถรับปุ่มและรับค่าก่อนป้อนเข้าในกล่องข้อความ
KEYUP: ทริกเกอร์เมื่อคีย์โผล่ขึ้นมา (ปล่อย) กุญแจสามารถรับได้ผ่านเหตุการณ์และค่าหลังจากอินพุตจากกล่องข้อความสามารถรับได้;
KeyPress: เหตุการณ์นี้เหมือนกันใน Chrome และ IE แต่ Firefox นั้นแตกต่างกันเล็กน้อย
1. ใน Chrome และ IE: ตราบใดที่คีย์ที่กดสามารถปรากฏตัวอักษรในกล่องข้อความมันจะถูกเรียกใช้ (เช่นตัวอักษรอินพุตตัวเลขสัญลักษณ์ ฯลฯ ) กุญแจสามารถรับได้ผ่านเหตุการณ์และเหตุการณ์ที่ไม่ได้กำหนด; หากอักขระไม่ปรากฏขึ้นมันจะไม่ถูกเรียกใช้ (เช่นปุ่มลูกศร, บ้าน, backspace ฯลฯ )
2. ใน Firefox: กุญแจเช่นตัวอักษรตัวเลขสัญลักษณ์ทิศทาง backspaces ฯลฯ สามารถเรียกใช้ทั้งหมด ชื่อคีย์สามารถรับได้ผ่าน event.key หากคีย์ที่กดสามารถส่งออกอักขระ event.keycode คือ 0 ถ้าอักขระไม่สามารถส่งออก event.keycode เป็นรหัส ASCII ที่สอดคล้องกัน
กลับไปที่หัวข้อดูรหัสก่อน (เหตุการณ์ที่กล่าวถึงข้างต้นเทียบเท่ากับ E ในรหัสต่อไปนี้):
การคัดลอกรหัสมีดังนี้: var isff = /firefox/i.test(navigator.useragent);
$ ("อินพุต"). บน ({
KEYUP: ฟังก์ชัน (e) {
!/^[/d:]+$/. ทดสอบ (e.target.value) && (e.target.value = "");
-
Keypress: function (e) {
if (isff && e.keycode! == 0) {
/// การกดปุ่มใด ๆ ใน Firefox จะทริกเกอร์เหตุการณ์ KeyPress ในขณะที่ใน IE/Chrome จะทริกเกอร์คีย์ที่สามารถส่งออกอักขระได้
/// สำหรับ Firefox, E.KeyCode! == 0 กดหนึ่งใน backspace, Direction, Home และ Keys อื่น ๆ
} อื่น {
ถ้า (e.target.value.length> 7)
กลับเท็จ;
if (//d {2}$/.test(e.target.value)) {
e.target.value += ':';
-
var char = string.fromCharcode (e.keCyde === 0?
ถ้า (!/^/d/.test (ถ่าน))
กลับเท็จ;
-
-
-
ISFF && E.KEYCODE! == 0 ใช้เพื่อแยกความแตกต่างระหว่างคีย์ที่สามารถส่งออกอักขระใน Firefox และปุ่มที่ไม่สามารถส่งออกอักขระได้ เนื่องจาก E.Keycode ใน Firefox อาจไม่ได้รับค่า E. ซึ่งใช้แทน
Keyup ใช้เพื่อจัดการกับปัญหาของความสามารถในการป้อนภาษาจีนหรือตัวอักษรเมื่อใช้วิธีการป้อนข้อมูล
ใช้ String.FromCharcode () เพื่อรับอักขระที่สอดคล้องกับรหัส ASCII
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน