Bản ghi này sẽ hướng dẫn bạn phát hiện khóa tab trong JavaScript.
Làm thế nào để phát hiện Tab Key trong JavaScript?
Để phát hiện khóa tab trong JavaScript, hãy áp dụng các kỹ thuật sau:
- “ querySelector () ' Phương pháp
- “ getElementbyId () ' Phương pháp
Các cách tiếp cận được đề cập sẽ được chứng minh từng cái một!
Phương pháp 1: Phát hiện khóa tab trong JavaScript bằng phương pháp document.querySelector ()
Các ' document.querySelector () ”Phương thức truy cập phần tử đầu tiên phù hợp với bộ chọn CSS, sau đó phương thức addEventListener () thêm một trình xử lý sự kiện vào phần tử được truy cập. Các phương pháp này có thể được áp dụng để truy cập loại đầu vào và phát hiện xem phím tab có được nhấn hay không khi nhập giá trị của nó.
Cú pháp
yếu tố. addEventListener ( Sự kiện , hàm số , useCapture )
Trong cú pháp đã cho, “ Sự kiện 'Đề cập đến tên sự kiện,' hàm số 'Là hàm cụ thể để thực thi khi sự kiện xảy ra và' useCapture ”Là đối số tùy chọn.
tài liệu. querySelector ( Bộ chọn CSS )Trong cú pháp trên, “ Bộ chọn CSS ”Đề cập đến một hoặc nhiều bộ chọn CSS có thể được chỉ định trong phương thức document.querySelector ().
Xem qua ví dụ sau để hiểu rõ hơn về khái niệm đã nêu.
Thí dụ
Đầu tiên, chỉ định loại đầu vào là “ chữ ”Với một giá trị giữ chỗ ban đầu và một tiêu đề trong“
< h2 > Kết quả < / h2 >
Tiếp theo, áp dụng “ document.querySelector () ' đầu vào ' và ' kết quả ”:
để đầu vào = tài liệu. querySelector ( 'đầu vào' ) ;hãy để kết quả = tài liệu. querySelector ( 'h2' ) ;
Bây giờ, hãy thêm dấu “ bàn phím ”Với trường đầu vào bằng phương thức addEventListener (). Sự kiện này sẽ thông báo cho người dùng bất cứ khi nào “ chuyển hướng Phím 'được nhấn trong trường nhập bằng cách áp dụng điều kiện sau với sự trợ giúp của' innerText ' tài sản:
đầu vào. addEventListener ( 'keydown' , ( và ) => {nếu ( và. Chìa khóa === 'Chuyển hướng' ) {
kết quả. innerText = 'Đã nhấn phím tab' ;
} khác {
kết quả. innerText = 'Phím tab không được nhấn' ;
}
Trong trường hợp này, khi người dùng nhấn phím tab, phần được thêm vào sẽ thông báo về hành động đã thực hiện:
Phương pháp 2: Phát hiện khóa tab trong JavaScript bằng phương thức document.getElementbyId ()
Các ' document.getElementById () ”Có thể được sử dụng để truy cập vào một phần tử HTML cụ thể dựa trên id của nó. Phương pháp này có thể được triển khai để lấy trường nhập và thêm một sự kiện để cảnh báo người dùng bất cứ khi nào phím cụ thể được nhấn, chẳng hạn như phím tab.
Cú pháp
tài liệu. getElementById ( các yếu tố )Trong cú pháp đã cho, “ các yếu tố ”Đề cập đến id của một phần tử được chỉ định.
Hãy xem tổng quan ví dụ sau.
Thí dụ
Trong ví dụ dưới đây, hãy bao gồm loại đầu vào và giá trị trình giữ chỗ như đã thảo luận trong phương pháp trước:
Bây giờ, tìm nạp id trường đầu vào bằng cách sử dụng “ document.getElementById () ' phương pháp.
let input = document.getElementById (“tab”);
Cuối cùng, thêm một sự kiện có tên “ bàn phím ”Trong phương thức addEventListener (), phương thức này sẽ cảnh báo người dùng bất cứ khi nào“ Chuyển hướng Phím ”được nhấn:
đầu vào. addEventListener ( 'keydown' , ( và ) => {nếu ( và. Chìa khóa === 'Chuyển hướng' ) {
báo động ( 'Đã nhấn phím tab' ) ;
}
} ) ;
Đầu ra
Chúng tôi đã thảo luận về tất cả các phương pháp đơn giản nhất để phát hiện khóa tab trong JavaScript.
Sự kết luận
Để phát hiện khóa tab trong JavaScript, hãy sử dụng “ addEventListener () ”Với“ document.querySelector () ' getElementbyId () ”Để tìm nạp trường đầu vào dựa trên id của nó và thông báo cho người dùng bất cứ khi nào điều kiện thêm vào được thỏa mãn. Blog này đã hướng dẫn về cách phát hiện khóa tab trong JavaScript.