คำนำ
เมื่อเร็ว ๆ นี้ผลิตภัณฑ์ต้องทำกล่องอินพุตจำนวนมาก เอฟเฟกต์แบบโต้ตอบที่ผลิตภัณฑ์ต้องการคือ: ผู้ใช้สามารถป้อนภาษาจีนและภาษาอังกฤษและเมื่อผู้ใช้ป้อนเข้าสู่จำนวนอักขระที่ป้อนสามารถแสดงได้ตามเวลาจริง เมื่อขีด จำกัด ปริมาณเกินขีด จำกัด เส้นขอบกล่องอินพุตจะเปลี่ยนเป็นสีแดงและผู้ใช้จะได้รับแจ้งสำหรับข้อมูล
การโต้ตอบนี้ดูเหมือนไม่มีปัญหาและดูเหมือนจะไม่มีปัญหาในการใช้งานทางเทคนิค แต่เมื่อฉันรู้ว่าฉันพบวิธีการป้อนข้อมูลของจีนและพบว่ามีข้อผิดพลาด
ช่างเป็นเคล็ดลับมาดูด้านล่าง ~~
การตรวจสอบความยาวเนื้อหาแบบเรียลไทม์ของกล่องอินพุตหลุมที่พบจะใช้ในการตรวจสอบเหตุการณ์ oninput
มีประโยชน์ 2 ประการในการใช้เหตุการณ์ oninput นี้:
เมื่อผู้ใช้เปลี่ยนเนื้อหาของกล่องอินพุตโดยคลิกขวาเขาจะได้ยิน
เหตุการณ์นี้จะถูกทริกเกอร์เฉพาะเมื่อเนื้อหาของกล่องอินพุตเปลี่ยนไป ตัวอย่างเช่นเหตุการณ์นี้จะไม่ถูกทริกเกอร์เมื่อผู้ใช้กดปุ่มอักขระควบคุมเช่นปุ่มลูกศร, control / shift ฯลฯ ;
เอฟเฟกต์นั้นสมบูรณ์แบบเมื่อคุณป้อนอักขระหรือตัวเลขภาษาอังกฤษและแม้กระทั่งเมื่อคุณ正常输入中文แต่เมื่อคุณ非正常输入中文จะเกิดข้อผิดพลาด อินพุตที่ผิดปกติคืออะไร? ดูตัวอย่างตัวอย่างต่อไปนี้:
คุณเคยเห็นไหม ในวิธีการป้อนข้อมูลภาษาจีนนี้ผู้ใช้ยังไม่ได้ป้อนภาษาจีนที่เขาต้องการเข้า แต่เพิ่งป้อนพินอินสองสามครั้ง แต่เหตุการณ์ input ถูกทริกเกอร์และ value กล่องอินพุตที่ฟังอยู่นั้น d'd'd ๆ แล้วไม่เพียง แต่อักขระพินซินเท่านั้น หากความยาวของเนื้อหากล่องอินพุตถูก จำกัด ไม่เกิน 5 ดังนั้นในกรณีของภาพหน้าจอผู้ใช้จะได้รับแจ้งให้字符长度超过限制！ - แน่นอนว่าผลกระทบแบบโต้ตอบดังกล่าวไม่ใช่สิ่งที่ผลิตภัณฑ์ต้องการ
ใช้กิจกรรม onkeydown / onkeypress / onkeyup เพื่อฟัง
ข้อเสียของเหตุการณ์เหล่านี้คือพวกเขาไม่สามารถฟังเนื้อหาอินพุตที่คัดลอกมาจากคลิกขวา แต่จะมีปัญหาเช่นเดียวกับเหตุการณ์ input หรือไม่?
ฉันได้ทำการทดลองหลายครั้งและพบว่า keydown และ keyup จะประสบปัญหาเช่นเดียวกับ input แต่ keypress ไม่มีปัญหานี้เนื่องจากในสถานะอินพุตจีน keypress จะไม่กระตุ้นไม่เพียง แต่จะไม่กระตุ้นในระหว่างกระบวนการป้อนพินอิน แต่จะไม่กระตุ้นให้คุณเลือกภาษาจีน จากนั้นเมื่อป้อน "ขวา, ขวา, ขวา" แม้ว่าจะเกินขีด จำกัด ของตัวละคร字符长度超过限制！ เคล็ดลับสำหรับ.
โซลูชันการประนีประนอม
เพื่อตรวจสอบความยาวของเนื้อหาแบบเรียลไทม์และเพื่อให้แน่ใจว่าไม่มีข้อบกพร่องในวิธีการป้อนข้อมูลภาษาจีนฉันได้ดิ้นรนเป็นเวลานานและในที่สุดก็พบว่าฉันไม่สามารถทำได้! (หากพบฮีโร่โปรดบอกฉัน ~~)
ดังนั้นในที่สุดประสบการณ์ผู้ใช้ก็ถูกเสียสละและพบการประนีประนอม: กล่องอินพุตสูญเสียโฟกัส (เช่น blur ) หรือผู้ใช้ตรวจสอบความยาวของเนื้อหาเมื่อป้อนคีย์อินพุต แน่นอนหากคุณพบว่าเนื้อหาของกล่องอินพุตเกินขีด จำกัด คุณควรเก็บเคอร์เซอร์ไว้ในกล่องอินพุตเพื่ออำนวยความสะดวกในการปรับเปลี่ยนผู้ใช้
อนิจจา用户输入回车键时才进行内容长度的检测และข้อผิดพลาดที่เขาเคยปลูกมาก่อน
วิธีตรวจสอบว่าป้อนคีย์ ENTER ในกล่องอินพุต
ในความเป็นจริงนี่เป็นปฏิสัมพันธ์ที่พบบ่อยมาก ตัวอย่างเช่นเมื่อแก้ไขชื่อจะสนับสนุนผู้ใช้ในการป้อนและบันทึกโดยตรงหลังจากป้อนค่าขนส่งและเมื่อเข้าสู่ระบบจะสนับสนุนผู้ใช้ในการป้อนและเข้าสู่ระบบโดยตรงหลังจากเข้าสู่การขนส่ง แต่ข้อผิดพลาดที่ต้องระวังคือ: **中文输入法下按回车键来输入英文字符**
ตัวอย่างของกระบวนการกดปุ่ม ENTER เพื่อป้อนอักขระภาษาอังกฤษภายใต้วิธีการป้อนข้อมูลภาษาจีน:
ตัวอย่างเช่นหากฉันต้องการป้อนบัญชีเพื่อเข้าสู่ระบบบัญชีของฉันเป็นภาษาอังกฤษทั้งหมด ขณะนี้ฉันอยู่ในวิธีการป้อนข้อมูลภาษาจีน แต่ฉันขี้เกียจเกินไปที่จะเปลี่ยนวิธีการป้อนข้อมูลดังนั้นฉันจึงพิมพ์บัญชีของฉันโดยตรง (อักขระภาษาอังกฤษทั้งหมด) ในเวลานี้วิธีการอินพุตของ Sogou ทำให้ฉันมีสตริงภาษาจีนจำนวนมากจากนั้นฉันก็กด Enter และกล่องอินพุตเข้าสู่อักขระภาษาอังกฤษที่ฉันต้องการ
ในกรณีนี้แม้ว่าผู้ใช้จะป้อนปุ่ม ENTER แต่ผู้ใช้ก็กดปุ่ม ENTER เพียงเพื่อป้อนอักขระภาษาอังกฤษภายใต้วิธีการป้อนข้อมูลภาษาจีน คีย์ ENTER นี้ไม่ใช่ปุ่ม Enter ที่เราต้องการตรวจสอบ ดังนั้นจะแยกแยะคีย์ ENTER ในกรณีนี้ได้อย่างไร?
โดยทั่วไปเมื่อฟังคีย์ ENTER เราจะใช้เหตุการณ์ keydown หรือเหตุการณ์ keyup และรหัสการใช้งานมีดังนี้ ดังนั้นทั้งสองวิธีสามารถกรองปุ่ม Enter ที่เราไม่ต้องการฟังได้หรือไม่?
// วิธีที่ 1: ใช้ Keydown Event Input.onkeydown = function (e) {ถ้า (e.keCyde == 13) {// ผู้ใช้ป้อนข้อมูลการดำเนินการที่เกี่ยวข้องกับรหัส // DOS}} // วิธีที่ 2: ใช้ keyup event input.onkeyup = function (e) หลังจากการทดลองพบว่าการใช้ keydown สามารถกรองได้สำเร็จ แต่การใช้ keyup ไม่สามารถทำได้
มาดูกันว่าทำไม
นี่เป็นเพราะในเหตุการณ์ keydown : คีย์ป้อนคีย์ที่ป้อนในสถานะวิธีการอินพุตภาษาจีน keyCode ที่ตรวจพบคือ 229 แทนที่จะเป็น 13 ; เมื่อเข้าสู่การส่งคืนเพียงแค่ keyCode คือ 13
ในเหตุการณ์ keyup : keyCode ที่ตรวจพบโดยการป้อนปุ่ม ENTER ในสถานะวิธีการป้อนข้อมูลภาษาจีนคือ 13 ; เมื่อเข้าสู่การป้อนเพียงแค่ keyCode ก็คือ 13
รูปต่อไปนี้เป็นผลลัพธ์ที่ฉันพิมพ์ในคอนโซล: (ดูที่นี่สำหรับตัวอย่างรหัส)
บทสรุป
หลายเหตุการณ์ที่เกี่ยวข้องในกล่องอินพุต: keydown/keyup/keypress/input/Change
ดูที่นี่: //www.vevb.com/article/21237.htm