JS 30 – Keyup và keydown trong JavaScript

0
74

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn hai sự kiện khi ta thao tác bàn phím và keyupkeydown.

Trước khi chúng ta đi vào tìm hiểu chi tiết, các bạn lưu ý rằng trên các thiết bị hiện đại có nhiều cách khác để “nhập nội dung”. Ví dụ: mọi người sử dụng nhận dạng giọng nói (đặc biệt là trên thiết bị di động) hoặc copy/paste bằng chuột.

Vì vậy, nếu chúng ta muốn theo dõi bất kỳ đầu vào nào của trường <input>, thì các sự kiện trên bàn phím là không đủ. Có một sự kiện khác có tên là input để xử lý các thay đổi của trường <input>.

Các sự kiện trên bàn phím nên được sử dụng khi chúng ta muốn xử lý các thao tác bàn phím (bàn phím ảo cũng được tính). Ví dụ như để nhận biết các phím mũi tên LênXuống hoặc các phím nóng (bao gồm cả các tổ hợp phím).

Keydown and keyup

Sự kiện keydown xảy ra khi một phím được nhấn, khi phím đó được thả ra thì đó là sự kiện keyup.

event.code và event.key

Thuộc tính key của đối tượng sự kiện cho phép nhận vào các ký tự, trong khi thuộc tính code của đối tượng sự kiện cho phép nhận được “khóa vật lý”.

Ví dụ, cùng một phím Z, ta có thể nhấn nó với phím Shift hoặc không. Điều đó cho chúng ta hai ký tự khác nhau: chữ thường z và chữ hoa Z.

Event.key sẽ phân biệt chữ hoa chữ thường, còn event.code thì không:

Key event.key event.code
Z z (chữ thường) KeyZ
Shift+Z Z (chữ hoa) KeyZ

Nếu người dùng làm việc với các ngôn ngữ khác nhau, thì việc chuyển sang ngôn ngữ khác sẽ tạo ra một ký tự hoàn toàn khác thay vì “Z”. Điều đó thay đổi giá trị của event.key, trong khi event.code luôn giống nhau: “KeyZ”.

Điều gì sẽ xảy ra nếu một key không nhận bất kỳ ký tự nào? Ví dụ, Shift hoặc F1, thì event.keyevent.code tương đương nhau:

Key event.key event.code
F1 F1 F1
Backspace Backspace Backspace
Shift Shift ShiftRight hoặc ShiftLeft

Lưu ý rằng event.code chỉ định chính xác phím nào được nhấn. Ví dụ, hầu hết bàn phím có hai phím Shift: ở bên trái và bên phải. Event.code cho chúng ta biết chính xác nút nào đã được nhấn và event.key chịu trách nhiệm về “ý nghĩa” của phím đó(“Shift”).

Giả sử, chúng ta muốn xử lý một phím nóng: Ctrl + Z (hoặc Cmd + Z cho Mac). Hầu hết các trình soạn thảo văn bản đều có tác vụ “Hoàn tác” trên đó, chúng ta có thể thiết lập một trình nhận biết khi phím được nhấn.

Các hành động mặc định

Chúng ta có các hành động mặc định khác nhau trên bàn phím, Ví dụ:

  • Một ký tự xuất hiện trên màn hình.
  • Một ký tự bị xóa (phím Delete).
  • Trang được cuộn (phím PageDown).
  • Trình duyệt mở hộp thoại “Save Page” (Ctrl + S).

Ngăn chặn các hành động mặc định trên keydown có thể hủy bỏ hầu hết các sự kiện, với ngoại lệ của các phím đặc biệt dựa trên hệ điều hành. Ví dụ, trên Windows Alt + F4 sẽ đóng cửa sổ trình duyệt hiện tại, và không có cách nào để ngăn chặn nó trong JavaScript.

Ví dụ: trường <input> bên dưới chỉ nhận vào một số điện thoại, vì vậy nó không chấp nhận các key ngoại trừ chữ số, +, () hoặc -:

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về hai sự kiện trên bàn phím là keyupkeydown. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn sự kiện Scroll trong JavaScript.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây