Các phím mũi tên trái và phải của JavaScript

Trong hướng dẫn này, bạn sẽ học cách phát hiện các phím mũi tên trong javascript. Trong bố cục bàn phím tiêu chuẩn, chúng ta có 4 mũi tên trái, phải, lên và xuống. Các phím mũi tên được đặt ngay trước bàn phím số trên bàn phím. Chúng thường được sử dụng để thay đổi vị trí con trỏ trong hộp văn bản cũng như giúp cuộn trang web

Bất cứ khi nào chúng ta nhấn một phím mũi tên hoặc bất kỳ phím nào khác trên bàn phím, một số sự kiện bàn phím nhất định sẽ được kích hoạt. Trong hàm xử lý sự kiện, đối tượng sự kiện chứa thông tin chi tiết về sự kiện bàn phím. Đối tượng sự kiện có thuộc tính key có thể tiết lộ phím nào đã được người dùng nhấn

Để đơn giản, chúng tôi sẽ theo dõi sự kiện keydown và trong chức năng xử lý sự kiện, chúng tôi sẽ xác minh xem phím mũi tên có được nhấn hay không

Trong ví dụ sau, chúng ta có một trường nhập liệu. Ngay khi người dùng nhấn phím mũi tên trong khi nhập vào trường nhập liệu, chúng tôi sẽ hiển thị một thông báo trên màn hình. Vui lòng xem qua ví dụ về mã và các bước được đưa ra bên dưới

Để trợ giúp thêm cho bạn, bạn có thể tải mô-đun của mình lên hoặc mô-đun mẫu có cùng vấn đề không?

Nếu không có thêm thông tin, rất khó để xác định vấn đề có thể là gì, vì chúng tôi đã có thể làm cho nó hoạt động

Tôi không chắc ý của bạn là gì khi nói " nhưng khi tiêu điểm không còn nữa. "? Bạn có thể làm rõ điều này không?

Ngoài ra, vui lòng cung cấp thêm bất kỳ thông tin nào có thể liên quan. Ví dụ: hãy cho chúng tôi biết nếu có bất kỳ giải pháp nào khác mà bạn đã thử nhưng không hiệu quả, để cộng đồng có thể giúp xác định nguyên nhân của vấn đề

Trong bài đăng này, chúng ta sẽ xem cách phát hiện nếu phím mũi tên được nhấn từ bàn phím bằng JavaScript với các đoạn mã ví dụ. Trước khi chúng ta tiếp tục, chúng ta nên lấy một số thông tin

Mỗi phím trên bàn phím có một mã phím duy nhất. Ở đây chúng tôi sẽ phát hiện nếu nhấn phím mũi tên. Chà, trên bàn phím của chúng ta có bốn phím mũi tên. Chúng ta có thể thấy các phím trái, phải, lên và xuống trên bàn phím của mình. Các phím này cũng có mã khóa duy nhất mà JavaScript có thể sử dụng để phát hiện xem các phím này có được nhấn hay không

Sao chép văn bản vào khay nhớ tạm khi nhấp bằng JavaScript

Tắt nhấp chuột phải, sao chép, cắt trên trang web bằng jQuery

Phím mũi tên trái có mã khóa 37, phím mũi tên lên có mã 38, phím bên phải có mã 39 và phím mũi tên xuống có mã khóa 40. Chúng tôi sẽ sử dụng các mã khóa này trong mã JavaScript của chúng tôi

Ở đây chúng ta sẽ sử dụng sự kiện onkeydown JavaScript để khi người dùng nhấn một trong các phím mũi tên, nó sẽ được phát hiện bởi javaScript của chúng ta.
Bạn có thể xem video hướng dẫn từ đây nếu muốn.

Dưới đây là mã JavaScript hoàn chỉnh

    document.onkeydown = function[event] {
        switch [event.keyCode] {
           case 37:
                alert['Left key pressed'];
              break;
           case 38:
                alert['Up key pressed'];
              break;
           case 39:
                alert['Right key pressed'];
              break;
           case 40:
                alert['Down key pressed'];
              break;
        }
    };

Sau khi bạn đặt mã JavaScript ở trên, bạn có thể kiểm tra tệp HTML của mình trên trình duyệt của mình. Mã này được hỗ trợ bởi hầu hết các trình duyệt web hiện đại bao gồm Chrome, Firefox Safari, v.v. Như bạn có thể thấy, mã mà chúng tôi có chỉ gồm vài dòng và đủ đơn giản nhưng mang lại hiệu suất cao

Tạo phần tử div có thể kéo được bằng giao diện người dùng jQuery

Nếu bạn kiểm tra mã trên trình duyệt của mình, bạn sẽ thấy hộp cảnh báo bất cứ khi nào bạn nhấn một trong các phím mũi tên. Trong mã của chúng tôi, chúng tôi đã sử dụng câu lệnh trường hợp chuyển đổi thay vì câu lệnh if. Nếu muốn, bạn cũng có thể sử dụng câu lệnh if. Nhưng tôi nghĩ câu lệnh switch case dễ đọc và dễ dàng hơn câu lệnh if

Với quy trình tương tự, bạn có thể dò tìm phím bấm bất kỳ trên bàn phím. Bạn chỉ cần mã khóa của khóa đó. Nhân tiện, ở đây trong bài đăng này, Chúng ta đã thấy cách phát hiện phím mũi tên được nhấn trong javaScript. Tôi hy vọng bạn thích bài viết này và nó sẽ hữu ích cho bạn

Làm cách nào để di chuyển một phần tử sang trái, phải, lên và xuống bằng các phím mũi tên?

Cải thiện bài viết

Lưu bài viết

Thích bài viết

• Cập nhật lần cuối. 17 tháng 9 năm 2019

Cải thiện bài viết

Lưu bài viết

Nhiệm vụ là di chuyển một phần tử sang trái, phải, lên, xuống bằng các phím mũi tên trong jquery, chúng ta có thể sử dụng phương thức keydown[] của jQuery cùng với. phương pháp animate[].
Phương thức keydown[] kích hoạt sự kiện keydown bất cứ khi nào Người dùng nhấn một phím trên bàn phím.
Cú pháp.

$[selector].keydown[function]

Tiếp cận

1. Các. Phương thức keydown[] được sử dụng để kiểm tra xem có phím nào được nhấn hay không và trả về phím nào được nhấn
2. Việc kiểm tra phím nào được kích hoạt được xác định bằng mã phím. Mã khóa được tuân theo
   • trái = 37
   • lên = 38
   • đúng = 39
   • xuống = 40
3. Chuyển động của phần tử theo phím được nhấn được thực hiện bằng cách sử dụng. phương pháp animate[]

ví dụ 1. Di chuyển phần tử lên trên bằng phím Mũi tên lên

________số 8

$[selector].keydown[function]

34

36

$[selector].keydown[function]

$[selector].keydown[function]

>1>4

>1>6

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1

html90 html43>4

>5>6

html98>0>

html9

html9

html94

_______71____496

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1

html90 html43>4

$[selector].keydown[function]

html98>0>

html98

>1 0

>1 2

>1 4

>1 6

>1 8

>1

html90 html43>4

$[selector].keydown[function]

html98>0>

html9

html9

html9

html931

_______427____432

25

8

$[selector].keydown[function]

________số 8

8html>52

đầu ra

• Trước khi nhấn phím Mũi tên trái
  
• Sau khi nhấn phím Mũi tên trái
  

Ví dụ 4. Di chuyển phần tử sang phải bằng các phím mũi tên phải

________số 8

$[selector].keydown[function]

_______43____615

36

$[selector].keydown[function]

$[selector].keydown[function]

>1>4

_______71____496

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1

html90 html43>4

$[selector].keydown[function]

html98>0>

html9

html9

html9