Có rất nhiều thông tin về các sự kiện bàn phím dựa trên trình duyệt, nhưng tôi không thể tìm thấy lời khuyên thiết thực nào cho các câu hỏi của mình trong một bài đăng mạch lạc duy nhất nên tôi nghĩ mình sẽ viết một số bài về chủ đề này, bắt đầu từ bài này. Tôi hy vọng sẽ cung cấp cho bạn [và cả tôi trong tương lai] nền tảng vững chắc và thông tin hữu ích. Có thể bản thân tương lai của chúng ta sẽ dành ít thời gian hơn để gỡ lỗi và có nhiều thời gian hơn để tạo ra những trải nghiệm tuyệt vời cho người dùng của chúng ta
Lời khuyên thiết thực đầu tiên mà tôi muốn đề cập đến là keydown
có thể là sự kiện bàn phím duy nhất mà chúng tôi cần. Những người khác, ai cần họ? . Được rồi, có thể keyup sẽ được lên kệ để đề phòng, nhưng chắc chắn keypress có thể bị loại bỏ
Tại sao?
Hãy xem bắt đầu bằng việc hiểu những sự kiện bàn phím nào tồn tại ngày nay
Các sự kiện bàn phím là gì?
Dưới đây là ba sự kiện bàn phím được hỗ trợ bởi tất cả các trình duyệt chính, theo thứ tự chúng được kích hoạt
keydown
– kích hoạt khi bất kỳ phím nào được nhấn xuống, kích hoạt trước và luôn trước khi trình duyệt xử lý phím [e. g. chèn văn bản, di chuyển tiêu điểm, v.v.]keypress
– kích hoạt khi phím tạo ra giá trị ký tự được nhấn xuống, kích hoạt saukeydown
và trước khi trình duyệt xử lý khóakeyup
– kích hoạt khi bất kỳ phím nào được giải phóng, kích hoạt lần cuối và trình duyệt xử lý khóa
Mỗi sự kiện này đều có thể hủy bỏ và tạo bong bóng DOM, nhưng không phải tất cả chúng đều hữu ích như nhau
Keydown là sự kiện duy nhất bạn cần sử dụng
Theo kinh nghiệm của tôi, keydown
là sự kiện bàn phím duy nhất đáng sử dụng, keypress
hoàn toàn có thể bị bỏ qua và keyup
rất thích hợp để bị bụi trên kệ
Tại sao?
Hãy cùng xem
Lý do sử dụng phím tắt
bảo hiểm chính
Keydown
kích hoạt cho bất kỳ phím nào vì vậy nó sẽ cung cấp cho bạn phạm vi phủ sóng nhiều nhất của các phím được nhấn. Ví dụ: nó sẽ kích hoạt một phím tạo ký tự như “f”, một phím bổ trợ như “Shift”, các phím chức năng, v.v. Bạn sẽ không bao giờ bỏ lỡ sự kiện bàn phím cho một phím được nhấn bằng keydown
Có thể hủy
Một lý do khác cho keydown
là nó kích hoạt trước khi trình duyệt xử lý khóa, do đó bạn có cơ hội hủy bỏ nó và/hoặc ngăn không cho nó nổi bọt thông qua DOM. Nếu bạn không muốn cho phép chèn chữ cái “f” vào – không vấn đề gì – chỉ cần hủy nó bằng cách sử dụng phương pháp keydown
1 của sự kiện. Nếu bạn không muốn sự kiện lan rộng [hay còn gọi là bong bóng qua DOM] thì bạn có thể ngăn chặn điều đó bằng cách sử dụng phương pháp keydown
2 của sự kiện
Nhất quán trên các trình duyệt
Một lý do khác để sử dụng keydown
là nó kích hoạt nhất quán trên các trình duyệt. Điều này rất quan trọng vì như bạn sẽ sớm thấy, điều này không phải lúc nào cũng đúng đối với sự kiện liên quan chặt chẽ của nó. keypress
Nói về keypress
, hãy xem tại sao chúng ta muốn tránh keypress
tiếp theo
Lý do tránh nhấn phím
Thiếu bảo hiểm quan trọng
keydown
7 kích hoạt sau keydown
, nhưng vẫn trước khi trình duyệt xử lý khóa [e. g. chèn ký tự, di chuyển tiêu điểm, gửi biểu mẫu, v.v.]. Bạn có thể hủy và ngừng tạo bọt của các sự kiện keypress
giống như bạn có thể làm với các sự kiện keydown
, nhưng keypress
chỉ kích hoạt cho một tập hợp con các khóa – các khóa tạo ra các giá trị ký tự – trong khi keydown
kích hoạt cho tất cả các khóa. Vì vậy, các phím bổ trợ như keypress
3, keypress
4, keypress
5, phím chức năng, v.v. sẽ không kích hoạt các sự kiện keypress
Điều này có thể đặt bạn vào tình huống mà bạn đang gỡ lỗi một cách không cần thiết cho keypress
để không kích hoạt các sự kiện hoặc khi bạn đang quản lý cả hai sự kiện keypress
và keydown
. Tại sao có hai phương pháp nắm bắt các sự kiện quan trọng khi một phương pháp sẽ làm?
Không nhất quán giữa các trình duyệt
Nếu bạn vẫn chưa tin thì đây là một lý do khác để tránh keypress
. Nó không được kích hoạt nhất quán trên các trình duyệt. Gì?. Tôi biết điều đó thật khó hiểu, nhưng Firefox sẽ kích hoạt sự kiện keypress
khi nhấn keydown
3 hoặc bất kỳ phím mũi tên nào, nhưng không có trình duyệt nào khác thực hiện việc này. Không Safari. Không phải Chrome. Không Opera. Thậm chí không có IE
không dùng nữa
Một lý do lớn để tránh keypress
, và có lẽ tôi nên dẫn đầu với điều này, đó là keypress
không được chấp nhận ở hiện tại
Loại sự kiện nhấn phím được xác định trong thông số kỹ thuật này để tham khảo và tính đầy đủ, nhưng thông số kỹ thuật này không chấp nhận việc sử dụng loại sự kiện này
Các thông số kỹ thuật của W3C đôi khi đi trước một chút và đôi khi chậm hơn một chút so với việc triển khai trình duyệt, vì vậy ở một nơi nào đó, điều này có thể có nghĩa là các trình duyệt sẽ loại bỏ keypress
. Nó không có khả năng bất cứ lúc nào sớm mặc dù. Việc sử dụng nó quá phổ biến trong các trang web và ứng dụng được xây dựng từ giữa những năm 1990 đến nay. Tuy nhiên, đó là một dấu hiệu tốt cho thấy tất cả chúng ta nên ngừng sử dụng nó trong tương lai
RIP keypress
Với keypress
hết cách, hãy chuyển sang phần lý do tại sao tốt nhất nên để keyup
ngồi trên kệ, phủi bụi
Lý do gác phím
Hãy đối mặt với nó. keyup
khá vô nghĩa
Các sự kiện bàn phím, keydown
và keyup
, độc lập với nhau. Trên thực tế, chúng kẹp trình duyệt thực hiện hành động mà người dùng sẽ thấy [e. g. chèn văn bản, xóa văn bản, đặt tiêu điểm cho phần tử có thể đặt tiêu điểm tiếp theo, v.v. ]
Không có hành động mặc định
Nếu bạn hủy một sự kiện keydown
, nó sẽ ngăn trình duyệt thực hiện hành động đó. Tuy nhiên, nó sẽ không ngăn keyup
kích hoạt khi chìa khóa được nhấc lên. keyup
5 là sự kiện riêng của nó. Bây giờ, giống như keydown
, bạn cũng có thể hủy bỏ keyup
, nhưng điều đó là vô nghĩa. Không có hành động mặc định nào được liên kết với keyup
. Lần duy nhất bạn cần hủy nó là nếu có trình xử lý keyup
tùy chỉnh mà bạn muốn ngăn không cho được gọi
Trừ khi bạn thực sự muốn biết rằng người dùng đã nhấc ngón tay khỏi phím mà họ đã nhấn – thực hay mô phỏng – keyup
thực sự không có gì nhiều để cung cấp. Nó tạo ra một bộ thu bụi mịn
Và trong trường hợp bạn thấy cần nó, nó sẽ ở ngay đó, chờ được sử dụng
Tránh trộn phím xuống và nhấn phím
Sự kiện bàn phím là sự kiện độc lập trừ khi chúng không. Và với keydown
và keypress
thì không. Mười một lần trong số mười điều này làm cho việc trộn và kết hợp các sự kiện bàn phím trở nên phức tạp không cần thiết
Nếu bạn đang nghĩ đến việc sử dụng cả keydown
và keypress
thì tôi muốn khuyên bạn một lời khuyên. Đừng. Nếu bạn hiện đang sử dụng chúng thì lần tới khi bạn sử dụng mã đó, hãy xem xét chuyển mã keypress
sang trình xử lý sự kiện akeydown
, sau đó nhanh chóng xóa trình xử lý keypress
Việc sử dụng_______2_______không chỉ quan trọng vì nó không được dùng nữa, nó còn tạo ra nhiều công việc hơn cho bạn. Bất cứ điều gì bạn có thể làm với keypress
bạn có thể làm với keydown
. Đơn giản hơn nhiều khi chỉ có một loại sự kiện phải lo lắng. Điều này giảm thiểu sự phức tạp gây ra bởi những thứ như trình duyệt kích hoạt keypress
không nhất quán và phải tính đến điều này trong mã ứng dụng
Và bạn thậm chí không nên sử dụng keypress
. Bạn đã đọc phần trên – Lý do không dùng keyup – phải không?
Keydown và keyup hỗ trợ các tương tác phức tạp
Một điều thú vị về keydown
và keyup
không có ở keypress
là khả năng hỗ trợ các tương tác phức tạp hơn giữa ứng dụng và người dùng. Nếu bạn là người dùng Slack, bạn có thể đã nhấn keypress
7 hoặc keypress
8 để chuyển bảng phím tắt. lưu ý bên lề. Slack được đóng gói như một ứng dụng gốc, nhưng nó thực sự là một ứng dụng dựa trên trình duyệt được cung cấp bên trong trình bao bọc Electron
Khi xem xét bài đăng này, đồng nghiệp của tôi Ben Beckwith đã đưa ra điều này trong một số phản hồi. Ông thậm chí còn chia sẻ một ví dụ đơn giản để minh họa điểm này
Giả sử bạn muốn chức năng như bảng phím tắt Slack. Bạn muốn người dùng có thể nhấn
keypress
8 để bật hộp bật lên hiển thị các phím tắt có sẵn để sử dụng trong ứng dụng. Trong tình huống này,keypress
sẽ không liên quan nên bạn cần sử dụngkeydown
hoặckeyup
Ví dụ này, có thể là giả tạo, là một ví dụ thực sự tuyệt vời về tính hữu dụng của keydown
và keyup
. Đối với keypress
, nó đóng thêm một chiếc đinh vào quan tài
Tiếp tục nhấn phím
Nếu bạn đã đọc bài đăng này thì hy vọng bạn đã đi đến kết luận tương tự. keydown
là người giữ, keypress
bị ném ra ngoài, và keyup
lên kệ. Nếu bạn không bị thuyết phục [hoặc khẳng định lại], đừng ngần ngại tweet cho tôi. Tôi luôn sẵn sàng kết hợp những quan điểm và thông tin mới vào suy nghĩ của riêng mình
Và nếu bạn đang tìm kiếm thêm thông tin về cách sử dụng các sự kiện này, API của chúng và các chi tiết đặc điểm kỹ thuật quan trọng của chúng thì đây là một vài tài liệu tham khảo hữu ích
Dưới đây là một số liên kết đến Mạng nhà phát triển Mozilla
- sự kiện keydown trên MDN
- sự kiện nhấn phím trên MDN
- sự kiện keyup trên MDN
- Sự kiện W3C DOM Cấp 3 / Giao diện người dùng
Trong các bài đăng tiếp theo, chúng ta sẽ xem xét các con trỏ nhảy và câu lệnh keyup
9 phổ biến xuất hiện trong rất nhiều trình xử lý sự kiện