Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Kích hoạt sự kiện khi nhấn Enter trong input text (HTML + jQuery)

HTML không có sự kiện "Enter key" tích hợp. Dùng jQuery bắt sự kiện keyup, kiểm tra keyCode === 13 (Enter), sau đó trigger custom event.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        // Định nghĩa custom event 'enterKey'
        $('input').bind("enterKey", function(e){
          alert("Phím Enter đã được nhấn!");
        });

        // Bắt keyup, kiểm tra Enter
        $('input').keyup(function(e){
          if(e.keyCode == 13) { // 13 = Enter
            $(this).trigger("enterKey");
          }
        });
      });
    </script>
  </head>
  <body>
    <input type="text" placeholder="Nhấn Enter ở đây...">
    <p>Nhấn phím Enter trong ô input trên.</p>
  </body>
</html>

Cách hiện đại (Vanilla JS, không cần jQuery)

document.querySelector('input').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') { // hoặc e.keyCode === 13
    console.log('Enter pressed');
    // this.dispatchEvent(new CustomEvent('enterKey'));
  }
});

Lưu ý

  • e.key === 'Enter' được khuyến nghị hơn e.keyCode (deprecated).
  • Nếu input trong form, nhấn Enter sẽ tự submit form. Dùng e.preventDefault() nếu không muốn submit.
  • Custom event cho phép tách logic xử lý Enter ra khỏi handler keyup.