หากเรามีกล่องข้อความบนหน้าเว็บของเรา เราอาจต้องการกระตุ้นให้มีการคลิกปุ่มเมื่อเรากดปุ่ม 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