โปรแกรมจาวาสคริปต์รับ keyCode ของแป้นพิมพ์ผ่านชื่อคีย์ได้อย่างไร

เครื่องมือแก้ไขของ Downcodes จะนำคุณไปสู่แอปพลิเคชันเดสก์ท็อปแชทบอท Claude AI ที่เพิ่งเปิดตัวใหม่ของ Anthropic! ขณะนี้แอปพลิเคชันนี้ออนไลน์อย่างเป็นทางการและรองรับระบบ Mac และ Windows ผู้ใช้สามารถดาวน์โหลดได้ฟรีผ่านทางเว็บไซต์ Anthropic อย่างเป็นทางการ เมื่อเปรียบเทียบกับเวอร์ชันเว็บ แอปพลิเคชันเดสก์ท็อปมอบประสบการณ์โต้ตอบที่สะดวกและรวดเร็วยิ่งขึ้น ทำให้ผู้ใช้สามารถพูดคุยกับ Claude ได้ทุกที่ทุกเวลา ปรับปรุงประสิทธิภาพการทำงานและการเรียนรู้ บทความนี้จะแนะนำโดยละเอียดเกี่ยวกับคุณสมบัติการทำงาน ข้อดี และการเปรียบเทียบกับแชทบอท AI อื่นๆ ของแอปพลิเคชันเดสก์ท็อป Claude และตอบคำถามทั่วไปบางข้อเพื่อให้คุณมีความเข้าใจอย่างครอบคลุมเกี่ยวกับเครื่องมือ AI อันทรงพลังนี้

ใน JavaScript เป็นข้อกำหนดทั่วไปที่จะต้องได้รับรหัสคีย์ของแป้นพิมพ์ที่สอดคล้องกันผ่านชื่อคีย์ (นั่นคือ ชื่อของคีย์ที่กดโดยผู้ใช้) ซึ่งส่วนใหญ่จะใช้สำหรับการประมวลผลเหตุการณ์ของแป้นพิมพ์ วิธีการรับ keyCode รวมถึงการฟังเหตุการณ์ของแป้นพิมพ์ การใช้แอตทริบิวต์ event.key และการค้นหาตารางการแมป keyCode ที่เกี่ยวข้อง การฟังเหตุการณ์บนคีย์บอร์ดเป็นวิธีการที่ตรงที่สุด เมื่อผู้ใช้กดปุ่ม เบราว์เซอร์จะทริกเกอร์เหตุการณ์แป้นพิมพ์ (เช่น การกดแป้น การกดแป้น) ออบเจ็กต์เหตุการณ์นี้มีข้อมูลการทำงานของแป้นพิมพ์ที่เกี่ยวข้อง ซึ่งในจำนวนนี้ event.keyCode (ตอนนี้ล้าสมัยแล้ว ขอแนะนำให้ใช้ event.code หรือ event .key) คุณลักษณะคือรหัสคีย์ที่เราต้องการได้รับ

1. ตรวจสอบเหตุการณ์แป้นพิมพ์

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

document.addEventListener ('keydown', ฟังก์ชั่น (เหตุการณ์) {

console.log (ชื่อของคีย์ที่กด: + event.key);

console.log(KeyCode ของคีย์ที่กด: + event.keyCode); // ไม่แนะนำ

console.log (แนะนำให้ใช้ event.code: + event.code);

-

รหัสนี้จะคอยฟังเหตุการณ์การกดลงของเอกสารทั้งหมด เมื่อใดก็ตามที่กดปุ่ม ชื่อของคีย์ปัจจุบัน (event.key), keyCode ที่เลิกใช้แล้ว (event.keyCode) และ event.code ที่แนะนำจะถูกพิมพ์ event.key ให้ชื่อคีย์ที่มนุษย์สามารถอ่านได้ ในขณะที่ event.code ให้การเข้ารหัสคีย์ที่มีความเสถียรและเป็นมาตรฐานมากกว่า ซึ่งเหมาะสำหรับการระบุคีย์จริงเฉพาะมากกว่า

2. ใช้แอตทริบิวต์ EVENT.KEY

คุณสมบัติ event.key ส่งคืนชื่อของคีย์ สำหรับสถานการณ์ส่วนใหญ่ที่ต้องรับรหัสคีย์ผ่านชื่อคีย์ การใช้ event.key โดยตรงก็เพียงพอที่จะตอบสนองความต้องการได้ เมื่อเปรียบเทียบกับ keyCode หรือ charCode ข้อดีของ event.key ก็คือสามารถส่งคืนชื่อคีย์ที่เข้าใจง่าย เช่น Enter, ArrowLeft ฯลฯ ได้โดยตรง ดังนั้นจึงไม่จำเป็นต้องตรวจสอบค่า keyCode ที่เกี่ยวข้อง

อย่างไรก็ตาม หากคุณต้องการ keyCode จริงๆ ในสถานการณ์ของคุณ คุณอาจต้องสร้างตารางการแมปจาก event.key ถึง keyCode ด้วยตัวเอง หรือใช้ฟังก์ชันไลบรารีเพื่อช่วยทำให้การแมปนี้เสร็จสมบูรณ์

const keyMap = {

เข้า: 13,

ลูกศรซ้าย: 37,

ลูกศรขวา: 39,

// กรอกข้อมูลการแมปคีย์เพิ่มเติม

-

document.addEventListener ('keydown', ฟังก์ชั่น (เหตุการณ์) {

ถ้า (keyMap [event.key]) {

console.log (รหัสคีย์ที่แมป: + keyMap [event.key]);

-

-

3. ค้นหาตารางการแมป KEYCODE ที่เกี่ยวข้อง

มีตารางคีย์โค้ดและชื่อคีย์ที่ตั้งโปรแกรมไว้ล่วงหน้ามากมายบนอินเทอร์เน็ต ในบางกรณี เมื่อคุณทราบชื่อคีย์เฉพาะที่ผู้ใช้กด และต้องการรับรหัสคีย์ที่เกี่ยวข้อง คุณสามารถค้นหาตารางการแมปเหล่านี้ได้โดยตรง อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือเนื่องจาก keyCode ถูกยกเลิกแล้วและไม่แนะนำให้ใช้อีกต่อไป แนวทางที่แนะนำคือใช้ event.key หรือ event.code ทุกครั้งที่เป็นไปได้ แนวทางนี้แม้จะยังคงมีอยู่ในโครงการเดิมบางโครงการ แต่ก็ไม่ควรมองว่าเป็นแนวทางแก้ไขในระยะยาว

4. ความเข้ากันได้ข้ามเบราว์เซอร์ของรหัสเหตุการณ์

แม้ว่า event.key และ event.code จะมอบวิธีที่ทันสมัยและเป็นมาตรฐานมากขึ้นในการจัดการเหตุการณ์ของคีย์บอร์ด แต่ก็ยังมีรายละเอียดบางอย่างที่ต้องคำนึงถึงเมื่อพูดถึงความเข้ากันได้ข้ามเบราว์เซอร์ เบราว์เซอร์รุ่นเก่าบางรุ่นอาจไม่รองรับคุณสมบัติเหล่านี้ ดังนั้นเมื่อพัฒนา ตรวจสอบให้แน่ใจว่าได้ดำเนินการตรวจจับคุณสมบัติที่เกี่ยวข้อง หรือใช้ Polyfill เพื่อให้การสนับสนุนทางเลือก

document.addEventListener ('keydown', ฟังก์ชั่น (เหตุการณ์) {

ให้คีย์ = event.key ||. event.keyCode;

console.log (กดปุ่ม: + ปุ่ม);

-

ในโค้ดนี้ ตัวดำเนินการ ||. ใช้เพื่อพยายามรับค่าของ event.key ก่อน หากไม่มี (ซึ่งอาจเกิดขึ้นในเบราว์เซอร์รุ่นเก่า) ก็จะกลับไปใช้ event.keyCode

สรุปแล้ว

แม้ว่าในทางเทคนิคจะสามารถรับ keyCode จากชื่อคีย์ได้หลายวิธี แต่ด้วยการพัฒนาเทคโนโลยีเว็บ ความจำเป็นในการใช้ keyCode โดยตรงก็ค่อยๆ ลดลง API ใหม่ เช่น event.key และ event.code มอบวิธีที่ใช้งานง่ายและเป็นมาตรฐานมากขึ้นในการจัดการเหตุการณ์บนคีย์บอร์ด ดังนั้น เมื่อต้องเผชิญกับข้อกำหนดดังกล่าว แนวปฏิบัติที่แนะนำคือการใช้ API สมัยใหม่เหล่านี้ ในขณะที่ยังคงคำนึงถึงความเข้ากันได้สำหรับเบราว์เซอร์รุ่นเก่า

คำถามที่พบบ่อยที่เกี่ยวข้อง:

1. วิธีรับ keyCode ของคีย์บอร์ดจากชื่อคีย์โดยใช้ JavaScript

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

ขั้นแรก ให้ฟังเหตุการณ์ของแป้นพิมพ์ เช่น การกดปุ่มเหตุการณ์การกดแป้นพิมพ์ การกดปุ่มเหตุการณ์การยกแป้นพิมพ์ หรือการกดปุ่มเหตุการณ์การป้อนอักขระ ในฟังก์ชันการประมวลผลเหตุการณ์ เหตุการณ์วัตถุเหตุการณ์จะได้รับซึ่งสามารถส่งผ่านพารามิเตอร์หรือรับผ่าน window.event ใช้ event.keyCode เพื่อรับรหัสคีย์ของแป้นพิมพ์

นี่คือโค้ดตัวอย่าง:

document.addEventListener('keydown', function(event) { var keyCode = event.keyCode; console.log('Keycode:', keyCode);}); วิธีรับชื่อคีย์ที่เกี่ยวข้องตาม keyCode

JavaScript จัดเตรียมอินเทอร์เฟซ KeyboardEvent ซึ่งสามารถใช้เพื่อรับชื่อคีย์ที่สอดคล้องกับโค้ดคีย์ สามารถรับได้โดยใช้คุณสมบัติ KeyboardEvent.key หรือ KeyboardEvent.code ขึ้นอยู่กับว่าคุณต้องการรับชื่อจริงของคีย์หรือคีย์แบบฮาร์ดโค้ดดั้งเดิมที่สร้างโดยเบราว์เซอร์

นี่คือโค้ดตัวอย่าง:

document.addEventListener('keydown', function(event) { var keyName = event.key; console.log('Keyname:', keyName);}); วิธีรับ keyCode ของแป้นพิมพ์ที่เข้ากันได้กับเบราว์เซอร์ต่างๆ

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

คุณสามารถใช้รหัสต่อไปนี้เพื่อให้เข้ากันได้กับเบราว์เซอร์ที่แตกต่างกัน:

document.addEventListener('keydown', function(event) { var keyCode = event.keyCode || event.ซึ่ง || event.charCode; console.log('Keycode: ', keyCode);});

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

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจวิธีจัดการกับเหตุการณ์ของแป้นพิมพ์และรับรหัสคีย์ใน JavaScript ได้ดีขึ้น บรรณาธิการของ Downcodes จะยังคงนำเสนอเคล็ดลับที่เป็นประโยชน์เพิ่มเติมแก่คุณต่อไป!