บทความนี้จะแนะนำให้คุณตรวจหาคีย์แท็บใน JavaScript
จะตรวจจับคีย์แท็บใน JavaScript ได้อย่างไร
ในการตรวจหาคีย์แท็บใน JavaScript ให้ใช้เทคนิคต่อไปนี้:
- “ แบบสอบถามตัวเลือก () ' วิธี
- “ getElementbyId() ' วิธี
วิธีการดังกล่าวจะแสดงให้เห็นทีละคน!
วิธีที่ 1: ตรวจหาคีย์แท็บใน JavaScript โดยใช้ document.querySelector() Method
“ document.querySelector() เมธอด เข้าถึงองค์ประกอบแรกที่ตรงกับตัวเลือก CSS จากนั้นเมธอด addEventListener() จะเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบที่เข้าถึง สามารถใช้วิธีการเหล่านี้เพื่อเข้าถึงประเภทอินพุตและตรวจสอบว่ามีการกดปุ่มแท็บหรือไม่เมื่อป้อนค่า
ไวยากรณ์
ธาตุ. addEventListener ( เหตุการณ์ , การทำงาน , ใช้จับภาพ )
ในไวยากรณ์ที่กำหนด “ เหตุการณ์ ” หมายถึงชื่อเหตุการณ์ “ การทำงาน ” เป็นฟังก์ชันเฉพาะที่จะดำเนินการเมื่อเกิดเหตุการณ์ และ “ ใช้จับภาพ ” เป็นอาร์กิวเมนต์ที่เป็นทางเลือก
เอกสาร. แบบสอบถามตัวเลือก ( ตัวเลือก CSS )ในไวยากรณ์ข้างต้น “ ตัวเลือก CSS ” หมายถึงตัวเลือก CSS หนึ่งตัวขึ้นไปที่สามารถระบุได้ในเมธอด document.querySelector()
ทำตามตัวอย่างต่อไปนี้เพื่อให้เข้าใจแนวคิดที่ระบุไว้มากขึ้น
ตัวอย่าง
ขั้นแรก ระบุประเภทอินพุตเป็น “ ข้อความ ” ด้วยค่าตัวยึดตำแหน่งเริ่มต้นและหัวเรื่องใน “
< ชั่วโมง2 > ผลลัพธ์ < / ชั่วโมง2 >
ถัดไป ใช้ “ document.querySelector() ” วิธีการเข้าถึงอินพุตที่ระบุและส่วนหัวตามลำดับและเก็บไว้ในตัวแปรชื่อ “ ป้อนข้อมูล ' และ ' ผลลัพธ์ ”:
ให้อินพุต = เอกสาร. แบบสอบถามตัวเลือก ( 'ป้อนข้อมูล' ) ;ให้ผล = เอกสาร. แบบสอบถามตัวเลือก ( 'เอช2' ) ;
ตอนนี้เพิ่ม ' คีย์ดาวน์ ” ด้วยฟิลด์อินพุตโดยใช้เมธอด addEventListener() กิจกรรมนี้จะแจ้งให้ผู้ใช้ทราบทุกครั้งที่ “ แท็บ ” กดปุ่มในช่องป้อนข้อมูลโดยใช้เงื่อนไขต่อไปนี้โดยใช้ปุ่ม “ innerText ' คุณสมบัติ:
ป้อนข้อมูล. addEventListener ( 'คีย์ดาวน์' , ( และ ) => {ถ้า ( และ. กุญแจ === 'แท็บ' ) {
ผลลัพธ์. innerText = 'กดแป้น Tab' ;
} อื่น {
ผลลัพธ์. innerText = 'ไม่ได้กดแป้น Tab' ;
}
ในกรณีนี้ เมื่อผู้ใช้กดแป้นแท็บ ผู้ใช้ที่เพิ่มจะแจ้งเกี่ยวกับการดำเนินการที่ดำเนินการ:
วิธีที่ 2: ตรวจหาคีย์แท็บใน JavaScript โดยใช้ document.getElementbyId() Method
“ document.getElementById() ” สามารถใช้เพื่อเข้าถึงองค์ประกอบ HTML เฉพาะตามรหัสของมัน วิธีนี้สามารถนำมาใช้เพื่อรับฟิลด์อินพุตและเพิ่มเหตุการณ์เพื่อเตือนผู้ใช้ทุกครั้งที่มีการกดปุ่มเฉพาะ เช่น ปุ่มแท็บ
ไวยากรณ์
เอกสาร. getElementById ( องค์ประกอบ )ในไวยากรณ์ที่กำหนด “ องค์ประกอบ ” หมายถึง id ขององค์ประกอบที่ระบุ
มาภาพรวมของตัวอย่างต่อไปนี้
ตัวอย่าง
ในตัวอย่างด้านล่าง ให้รวมประเภทอินพุตและค่าตัวยึดตามที่อธิบายในวิธีก่อนหน้านี้:
ตอนนี้ดึงข้อมูล id ช่องใส่โดยใช้ ' document.getElementById() ' กระบวนการ.
ให้อินพุต = document.getElementById(“แท็บ”);
สุดท้ายเพิ่มกิจกรรมชื่อ “ คีย์ดาวน์ ” ในเมธอด addEventListener() ซึ่งจะแจ้งเตือนผู้ใช้เมื่อใดก็ตามที่ “ แท็บ ” กดปุ่ม:
ป้อนข้อมูล. addEventListener ( 'คีย์ดาวน์' , ( และ ) => {ถ้า ( และ. กุญแจ === 'แท็บ' ) {
เตือน ( 'กดแป้น Tab' ) ;
}
} ) ;
เอาท์พุต
เราได้พูดถึงวิธีการที่ง่ายที่สุดในการตรวจหาคีย์แท็บใน JavaScript แล้ว
บทสรุป
ในการตรวจหาคีย์แท็บใน JavaScript ให้ใช้ “ addEventListener() ' กับ ' document.querySelector() ” วิธีรับประเภทอินพุตและใช้งานเหตุการณ์เพื่อตรวจจับคีย์ที่ระบุหรือ “ getElementbyId() ” วิธีการดึงช่องป้อนข้อมูลตามรหัสและแจ้งให้ผู้ใช้ทราบเมื่อใดก็ตามที่เป็นไปตามเงื่อนไขที่เพิ่มเข้ามา บล็อกนี้แนะนำเกี่ยวกับการตรวจหาคีย์แท็บใน JavaScript