[Tự học Javascript] Bàn phím: keydown and keyup trong Javascript » https://final-blade.com

Posted on by adminChuyên mục:Kiến thức Internet

Hôm nay cafedev san sẻ về bàn phím khi thao tác với Javascript. Trước khi sử dụng bàn phím, xin quan tâm rằng trên những thiết bị văn minh 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 quan trọng là trên thiết bị di động ) hoặc sao chép / dán 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 vào một trường , thì các sự kiện bàn phím là không đủ. Có một sự kiện khác được đặt tên input để theo dõi các thay đổi của một trường , bằng mọi cách. Và nó có thể là một lựa chọn tốt hơn cho nhiệm vụ như vậy. Chúng ta sẽ trình bày ở phần sau của chương Sự kiện: thay đổi, nhập, cắt, sao chép, dán .

Các sự kiện bàn phím nên được sử dụng khi tất cả chúng ta muốn giải quyết và xử lý những thao tác trên bàn phím ( bàn phím ảo cũng được tính ). Ví dụ : để phản ứng trên những phím mũi tên Up và Down hoặc phím nóng ( gồm có những tổng hợp phím ) .

1. Keydown and keyup

Các sự kiện keydown xảy ra khi một phím được nhấn xuống và sau đó keyup – khi nó được nhả ra .

1.1. event.code và event.key

Các thuộc tính key của đối tượng người dùng sự kiện được cho phép để có được những ký tự, trong khi thuộc tính code của đối tượng người dùng sự kiện được cho phép để có được “ code key ” .
Ví dụ, Z hoàn toàn có thể nhấn cùng một phím có hoặc không Shift. Điều đó cho tất cả chúng ta hai ký tự khác nhau : chữ thường z và chữ hoa Z .
Các event.key đúng chuẩn là ký tự, và nó sẽ khác nhau. Nhưng event.code giống nhau :

Chìa khóa event.key event.code
Z z (chữ thường) KeyZ
Shift+Z Z (chữ hoa) KeyZ

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

“KeyZ” và các mã khóa khác

Mỗi phím đều có code phụ thuộc vào vào vị trí của nó trên bàn phím. Các code chính được miêu tả trong đặc tả mã Sự kiện giao diện người dùng .
Ví dụ :

  • Phím chữ có code  “Key”: “KeyA”, “KeyB”, vv
  • Các khóa chữ số có mã “Digit”:: “Digit0”, “Digit1″v.v.
  • Các phím đặc biệt được code hoá bằng tên của họ: “Enter”, “Backspace”, “Tab”, vv

Có một số ít bố cục tổng quan bàn phím thông dụng và đặc thù kỹ thuật phân phối mã phím cho từng loại trong số chúng .
Đọc phần chữ và số của thông số kỹ thuật kỹ thuật để biết thêm mã

Vấn đề trường hợp:, “KeyZ” và không “keyZ”

Có vẻ hiển nhiên, nhưng người ta vẫn mắc sai lầm đáng tiếc .
Hãy tránh những kiểu nhầm lẫn : nó là KeyZ, không phải keyZ. Kiểm tra như event.code = = ” keyZ ” sẽ không hoạt động giải trí : vần âm tiên phong của “ Key ” phải là chữ hoa .
Điều gì xảy ra nếu một khóa không phân phối bất kể ký tự nào ? Ví dụ, Shift hoặc F1 hoặc những phím khác. Đối với những khóa đó, event.key gần giống như event.code :

Chìa khóa event.key event.code
F1 F1 F1
Backspace Backspace Backspace
Shift Shift ShiftRight hoặc là ShiftLeft

Xin quan tâm rằng event.code chỉ định đúng mực phím nào được nhấn. Ví dụ, hầu hết những bàn phím đều có hai phím Shift : ở bên trái và ở bên phải. Các event.code cho tất cả chúng ta biết đúng chuẩn ai bị nhấn, và event.key chịu nghĩa vụ và trách nhiệm về “ ý nghĩa ” của khóa : nó là ( một “ Shift ” ) .
Giả sử, tất cả chúng ta muốn giải quyết và xử lý một phím nóng : ( hoặc cho Mac ). Hầu hết những trình soạn thảo văn bản đều gắn hành vi “ Hoàn tác ” trên đó. Chúng ta hoàn toàn có thể bật chính sách nghe và kiểm tra phím nào được nhấn. Ctrl + Z Cmd + Z keydown
Có một trường hợp khó xử ở đây : trong một người nghe như vậy, tất cả chúng ta nên kiểm tra giá trị của event.key hoặc event.code ?
Một mặt, giá trị của event.key là một ký tự, nó đổi khác tùy thuộc vào ngôn từ. Nếu khách truy vấn có 1 số ít ngôn từ trong Hệ quản lý và quy đổi giữa chúng, thì cùng một phím sẽ phân phối những ký tự khác nhau. Vì vậy, nó là hài hòa và hợp lý để kiểm tra event.code, nó luôn luôn giống nhau .
Như thế này :

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
    alert('Undo!')
  }
});

Mặt khác, có một yếu tố với event.code. Đối với những bố cục tổng quan bàn phím khác nhau, cùng một phím hoàn toàn có thể có những ký tự khác nhau .
Ví dụ, đây là bố cục tổng quan của Hoa Kỳ ( “ QWERTY ” ) và bố cục tổng quan của Đức ( “ QWERTZ ” ) ( từ Wikipedia ) :

Đối với cùng một phím, bố cục tổng quan của Hoa Kỳ có “ Z ”, trong khi bố cục tổng quan của Đức có “ Y ” ( những vần âm được hoán đổi ) .
Theo nghĩa đen, event.code sẽ giống KeyZ so với những người có bố cục tổng quan tiếng Đức khi họ nhấn Y .
Nếu tất cả chúng ta kiểm tra event.code = = ‘ KeyZ ’, thì so với những người có bố cục tổng quan tiếng Đức, bài kiểm tra đó sẽ vượt qua khi họ nhấn Y .
Điều đó nghe thực sự kỳ lạ, nhưng nó là như vậy. Đặc điểm kỹ thuật đề cập rõ ràng hành vi như vậy .

Vì vậy, event.code có thể khớp một ký tự sai cho bố cục không mong muốn. Các chữ cái giống nhau trong các bố cục khác nhau có thể ánh xạ đến các phím vật lý khác nhau, dẫn đến các code khác nhau. May mắn thay, điều đó chỉ xảy ra với một số code, ví dụ như keyA, keyQ, keyZ(như chúng ta đã nhìn thấy), và không xảy ra với các phím đặc biệt như Shift. Bạn có thể tìm thấy danh sách trong thông số kỹ thuật .

Để theo dõi những ký tự phụ thuộc vào bố cục tổng quan một cách đáng an toàn và đáng tin cậy, event.key hoàn toàn có thể là một cách tốt hơn .
Mặt khác, event.code có quyền lợi là luôn giữ nguyên, ràng buộc với vị trí chính thực, ngay cả khi khách truy vấn đổi khác ngôn từ. Vì vậy, những phím nóng dựa vào nó hoạt động giải trí tốt ngay cả trong trường hợp quy đổi ngôn từ .
Chúng ta có muốn giải quyết và xử lý những khóa nhờ vào vào bố cục tổng quan không ? Sau đó event.key là con đường dễ đi .
Hay tất cả chúng ta muốn một phím nóng hoạt động giải trí ngay cả sau khi quy đổi ngôn từ ? Sau đó, event.code hoàn toàn có thể tốt hơn .

2. Tự động lặp lại

Nếu một phím được nhấn trong một thời hạn đủ lâu, phím đó sẽ mở màn “ tự động hóa tái diễn ” : những phím keydown này sẽ kích hoạt lặp đi lặp lại, và sau đó khi nó được nhả ra, tất cả chúng ta ở đầu cuối cũng nhận được keyup. Vì vậy, việc có nhiều keydown và duy nhất là chuyện thông thường keyup .
Đối với những sự kiện được kích hoạt bằng cách tự động hóa tái diễn, đối tượng người tiêu dùng sự kiện có thuộc tính event.repeat được đặt thành true .

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

Các hành vi mặc định khác nhau, vì bàn phím hoàn toàn có thể triển khai nhiều thao tác khác nhau .
Ví dụ :

  • Một ký tự xuất hiện trên màn hình (kết quả rõ ràng nhất).
  • 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 “Lưu trang” ( )Ctrl+S
  • …và như thế.

Việc ngăn ngừa hành vi mặc định trên keydown hoàn toàn có thể hủy hầu hết chúng, ngoại trừ những khóa đặc biệt quan trọng dựa trên hệ quản lý và điều hành. Ví dụ : trên Windows đóng hành lang cửa số trình duyệt hiện tại. Và không có cách nào để ngăn ngừa nó bằng cách ngăn hành vi mặc định trong JavaScript. Alt + F4

Ví dụ, dưới đây hy vọng một số điện thoại, vì vậy nó không chấp nhận các phím trừ chữ số, +, ()hoặc -:

Xin chú ý quan tâm rằng những phím đặc biệt quan trọng, ví dụ điển hình như Backspace, Left, Right, , không thao tác trong những input. Đó là một tính năng phụ của bộ lọc khắt khe. Ctrl + V
Hãy thư giãn giải trí nó một chút ít :

Giờ đây, mũi tên và tính năng xóa hoạt động giải trí tốt .
… Nhưng tất cả chúng ta vẫn hoàn toàn có thể nhập bất kỳ thứ gì bằng cách sử dụng chuột và nhấp chuột phải vào + Dán. Vì vậy bộ lọc không đáng an toàn và đáng tin cậy 100 %. Chúng ta hoàn toàn có thể để nó như vậy, chính bới hầu hết thời hạn nó hoạt động giải trí. Hoặc một cách tiếp cận khác sẽ là theo dõi sự kiện input – nó sẽ kích hoạt sau bất kể sửa đổi nào. Ở đó, tất cả chúng ta hoàn toàn có thể kiểm tra giá trị mới và lưu lại / sửa đổi nó khi nó không hợp lệ .

4. Di sản

Trong quá khứ, đã có một sự kiện keypress, và cũng hoàn toàn có thể thuộc tính keyCode, charCode, which của đối tượng người dùng sự kiện .
Có rất nhiều điểm không thích hợp của trình duyệt khi thao tác với chúng, đến nỗi những nhà tăng trưởng đặc thù kỹ thuật không có cách nào khác ngoài việc ngừng sử dụng toàn bộ chúng và tạo những sự kiện mới, văn minh ( được diễn đạt ở trên trong chương này ). Mã cũ vẫn hoạt động giải trí, vì những trình duyệt liên tục tương hỗ chúng, nhưng trọn vẹn không cần sử dụng chúng nữa .

5. Tóm lược

Nhấn một phím luôn tạo ra một sự kiện bàn phím, hoàn toàn có thể là chìa khóa hình tượng hoặc những phím đặc biệt quan trọng như Shift hay Ctrl và vân vân. Ngoại lệ duy nhất là phím Fn đôi lúc Open trên bàn phím máy tính xách tay. Không có sự kiện bàn phím cho nó, vì nó thường được tiến hành ở cấp thấp hơn OS .
Sự kiện bàn phím :

  • keydown – khi nhấn phím (tự động lặp lại nếu nhấn phím lâu),
  • keyup – khi thả chìa khóa.

Thuộc tính sự kiện bàn phím chính :

  • code – “mã phím” ( “KeyA”, “ArrowLeft”v.v.), cụ thể cho vị trí thực của phím trên bàn phím.
  • key- ký tự ( “A”, “a”v.v.), đối với các khóa không phải ký tự, chẳng hạn Esc, thường có cùng giá trị như code.

Trước đây, những sự kiện bàn phím nhiều lúc được sử dụng để theo dõi thông tin nhập của người dùng trong những trường biểu mẫu. Điều đó không đáng an toàn và đáng tin cậy, vì nguồn vào hoàn toàn có thể đến từ nhiều nguồn khác nhau. Chúng ta có input và change những sự kiện để giải quyết và xử lý bất kể nguồn vào nào ( được đề cập ở phần sau của chương Sự kiện : biến hóa, nhập, cắt, sao chép, dán ). Chúng kích hoạt sau bất kể loại đầu vào nào, gồm có sao chép dán hoặc nhận dạng giọng nói .

Chúng ta nên sử dụng những sự kiện bàn phím khi tất cả chúng ta thực sự muốn có bàn phím. Ví dụ : để phản ứng trên phím nóng hoặc phím đặc biệt quan trọng .

Nguồn và tài liệu tiếng anh tham khảo:

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha .
Nếu bạn thấy hay và có ích, bạn hoàn toàn có thể tham gia những kênh sau của cafedev để nhận được nhiều hơn nữa :

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

admin