หากเรามีกล่องข้อความบนหน้าเว็บของเรา เราอาจต้องการกระตุ้นให้มีการคลิกปุ่มเมื่อเรากดปุ่ม Enter
ในบทความนี้ เราจะดูวิธีทริกเกอร์การคลิกปุ่มด้วย JavaScript เมื่อกดปุ่ม Enter ในกล่องข้อความ
ใช้วิธีคลิก
เราสามารถเรียกเมธอด click
ที่สามารถใช้ได้กับออบเจ็กต์โหนดองค์ประกอบ HTML เพื่อคลิกองค์ประกอบโดยทางโปรแกรม
ตัวอย่างเช่น เราสามารถเขียน HTML ต่อไปนี้:
<input type="text" id="txtSearch" /> <input type="button" id="btnSearch" value="Search" />
จากนั้นเราสามารถเขียนโค้ด JavaScript ต่อไปนี้เพื่อตรวจสอบการกดปุ่ม Enter และทริกเกอร์การคลิกปุ่มหลังจากนั้น:
const txtSearchEl = document.getElementById('txtSearch') const btnSearchEl = document.getElementById('btnSearch') txtSearchEl.addEventListener('keydown', (event) => { if (event.keyCode == 13) { btnSearchEl.click() } }) btnSearchEl.addEventListener('click', () => { console.log('search button clicked') })
เราได้รับ 2 อินพุตด้วย document.getElementById
จากนั้นเราจะเรียก addEventListener
บน txtSearchEl
โดยมีสตริง 'keydown'
เป็นอาร์กิวเมนต์แรกในการเพิ่มตัวฟังเหตุการณ์สำหรับ keydown
event
ต่อไป เราจะส่งผ่านการโทรกลับเป็นอาร์กิวเมนต์ที่ 2 ที่ทำงานเมื่อมีการทริกเกอร์เหตุการณ์
ในการโทรกลับ เราจะตรวจสอบคุณสมบัติ keyCode
เพื่อดูว่าเป็น 13 หรือไม่
หากเป็นเช่นนั้นให้กดปุ่ม Enter
จากนั้นเราจะได้รับออบเจ็กต์โหนดองค์ประกอบ btnSearchEl
HTML ซึ่งเป็นปุ่มด้านล่างกล่องข้อความ และเรียก click
เมธอด click
จะทริกเกอร์การคลิกโดยทางโปรแกรม
ต่อไป เราจะเพิ่มตัวฟังการคลิกให้กับออบเจ็กต์โหนดองค์ประกอบ btnSearchEl
เพื่อทำบางสิ่งเมื่อมีการคลิกปุ่ม
ดังนั้นเมื่อมีการเรียก click
เราควรเห็น 'search button clicked'
บันทึกไว้
นอกจากนี้เรายังสามารถตรวจสอบคุณสมบัติ event.key
แทนคุณสมบัติ event.keyCode
ได้อีกด้วย
ตัวอย่างเช่น เราสามารถเขียนได้ว่า:
const txtSearchEl = document.getElementById('txtSearch') const btnSearchEl = document.getElementById('btnSearch') txtSearchEl.addEventListener('keydown', (event) => { if (event.key === "Enter") { btnSearchEl.click() } }) btnSearchEl.addEventListener('click', () => { console.log('search button clicked') })
event.key
ส่งคืนสตริงที่มีชื่อของคีย์ที่เรากด ดังนั้นจึงใช้งานง่ายกว่าการตรวจสอบรหัสคีย์
บทสรุป
เราสามารถทริกเกอร์การคลิกปุ่มได้หลังจากการกดปุ่มโดยการดูเหตุการณ์ keydown
กับตัวฟังเหตุการณ์
ในเหตุการณ์ Listener เราจะเรียก click
บนออบเจ็กต์องค์ประกอบปุ่มเพื่อทริกเกอร์การคลิกโดยทางโปรแกรม
และเราสามารถแนบ click
event Listener ไว้ที่องค์ประกอบปุ่มเพื่อทำบางสิ่งเมื่อเราคลิกที่ปุ่ม
เนื้อหาเพิ่มเติมได้ที่ plainenglish.io