จับ Event Enter Key Press ใน JavaScript

ใช้ event.keyCode === 13 หรือ event.key === 'Enter'

ผูก event keypress หรือ keydown ให้ input ตรวจสอบปุ่ม Enter

ตัวอย่างโค้ดเต็ม

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enter Key Press</title>
</head>
<body>
  <input id="enterDemo" type="text" placeholder="กด Enter ที่นี่" />

  <script>
    const input = document.getElementById('enterDemo');
    
    // ใช้ keydown (แนะนำ) แทน keypress (deprecated)
    input.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') { // มาตรฐานใหม่ ใช้ key
        console.log("Enter key is pressed");
        event.preventDefault(); // ป้องกัน form submit ถ้าอยู่ใน form
      }
    });
    
    // วิธีเก่า (ยังทำงานได้แต่ deprecated)
    // input.onkeypress = function(event) {
    //   if (event.keyCode === 13) { ... }
    // };
  </script>
</body>
</html>

วิธีรัน

บันทึกเป็น index.html แล้วเปิดด้วย Live Server กด Enter ในช่องกรอก ดู Console

คำอธิบาย

• event.key === 'Enter': มาตรฐานใหม่ อ่านง่าย รองรับทุกภาษา/แป้นพิมพ์
• event.keyCode === 13: รหัสเก่า (deprecated) แต่ยังใช้ได้
• keydown vs keypress: keypress ถูก deprecated ควรใช้ keydown
• preventDefault() หยุดการกระทำ default (เช่น form submit, newline ใน textarea)

การประยุกต์: Submit Form ด้วย Enter

form.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
    e.preventDefault();
    form.requestSubmit(); // trigger submit event
  }
});