Bài 23: Xử lý sự kiện bàn phím & form

Tiếp tục với Bài 29 – Xử lý sự kiện bàn phím và form trong JavaScript. Đây là phần quan trọng giúp bạn tương tác với người dùng khi họ nhập liệu vào form, nhấn phím, hoặc gửi dữ liệu.

1. Bắt sự kiện bàn phím (keydown, keyup, keypress)

📋 Copydocument.addEventListener("keydown", function (e) {
  console.log("Bạn nhấn phím:", e.key)
})

Sự kiện thường dùng:

• keydown: khi nhấn phím xuống
• keyup: khi thả phím ra
• keypress: nhấn ký tự (cũ, nên hạn chế dùng)

2. Bắt sự kiện khi nhập trong input

📋 Copy<input type="text" id="username" placeholder="Nhập tên" />

📋 Copylet input = document.getElementById("username")

input.addEventListener("input", function () {
  console.log("Đang gõ:", input.value)
})

3. Xử lý khi nhấn Enter

📋 Copyinput.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    alert("Bạn vừa nhấn Enter với tên: " + input.value)
  }
})

4. Xử lý form khi nhấn Gửi (submit)

📋 Copy<form id="myForm">
  <input type="text" id="email" />
  <button type="submit">Gửi</button>
</form>

📋 Copydocument.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault() // Ngăn load lại trang
  let email = document.getElementById("email").value
  alert("Đã gửi: " + email)
})

5. Giao diện học (code + output)

Tóm tắt bài 29

Bạn đã học:

• Bắt phím với keydown, keyup
• Theo dõi input bằng input.addEventListener("input")
• Phát hiện nhấn Enter để xử lý nhanh
• Gửi form bằng submit, chặn reload với preventDefault()
• Lấy dữ liệu từ các input để xử lý logic

Bài tập

1. Tạo 1 input → khi nhấn Enter thì in ra tên vừa nhập
2. Tạo form có ô email → bấm Gửi thì hiện alert chứa email đó
3. Tạo input + ô hiển thị realtime nội dung đang gõ
4. Bắt sự kiện keydown → in ra tên phím vừa nhấn