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

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

Bàn luận

khóa học

Luyện tập

Băng hình

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

<html>

________số 8

<____10>

$(selector).keydown(function)

2<1>

34

36

$(selector).keydown(function)

2______48____41>

$(selector).keydown(function)

2____5<3 <4<5

<6>

$(selector).keydown(function)

2____48____53____7

$(selector).keydown(function)

2_______5html4 html5<5html7>

html9>0

>1>2

>1>4

>1>6

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1<0

html9<2

$(selector).keydown(function)

2______48____64>

8

$(selector).keydown(function)

0____7

________số 8

<

$(selector).keydown(function)

02>

$(selector).keydown(function)

2____5

$(selector).keydown(function)

06>

html9<>0 html4<5>3>4

>5>6

html98>0>

html9<

$(selector).keydown(function)

23____7

$(selector).keydown(function)

25

$(selector).keydown(function)

26

html98

$(selector).keydown(function)

23>

html9<030403>

html9<09 10<5121309>

html9<<3 html5<521>

_______71____424

2526

2728

2930

_______427____432

25<2

_______71____432

_______69____48____53____7

_______12____48____106>

8

$(selector).keydown(function)

02____7

8html50

đầu ra

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

ví dụ 2. Di chuyển phần tử xuống Xuống bằng các phím mũi tên Xuống

<html>

________số 8

<____10>

$(selector).keydown(function)

2<1>

34

36

$(selector).keydown(function)

2______48____41>

$(selector).keydown(function)

2____5<3 <4<5

<6>

$(selector).keydown(function)

2____48____53____7

$(selector).keydown(function)

2_______5html4 html5<5html7>

html9>0

>1>2

>1>4

_______71____496

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1<0

html9<2

$(selector).keydown(function)

2______48____64>

8

$(selector).keydown(function)

0____7

________số 8

<

$(selector).keydown(function)

02>

$(selector).keydown(function)

2____5

$(selector).keydown(function)

06>

html9<>0 html4<5>3>4

$(selector).keydown(function)

25>6

html98>0>

html9<

$(selector).keydown(function)

23____7

$(selector).keydown(function)

25<46

html98

$(selector).keydown(function)

23>

html9<030403>

html9<09 10<512<6309>

html9<<3 html5<521>

_______71____424

________ 425 ________ 576

2728

_______429____580

_______427____432

25<2

_______71____432

_______69____48____53____7

_______12____48____106>

8

$(selector).keydown(function)

02____7

________số 8

8htmlhtml01

đầu ra

• Trước khi nhấn phím Mũi tên xuống
  
  
• Sau khi nhấn phím mũi tên xuống
  
  

ví dụ 3. Di chuyển phần tử sang trái bằng các phím mũi tên trái

<html>

________số 8

<____10>

$(selector).keydown(function)

2<1>

_______43____615

36

$(selector).keydown(function)

2______48____41>

$(selector).keydown(function)

2____5<3 <4<5

<6>

$(selector).keydown(function)

2____48____53____7

$(selector).keydown(function)

2_______5html4 html5<5html7>

html9>0

>1>2

>1>4

_______71____496

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1<0

html9<2

$(selector).keydown(function)

2______48____64>

8

$(selector).keydown(function)

0____7

________số 8

<

$(selector).keydown(function)

02>

$(selector).keydown(function)

2____5

$(selector).keydown(function)

06>

html9<>0 html4<5>3>4

$(selector).keydown(function)

25>6

html98>0>

html9<

$(selector).keydown(function)

23____7

$(selector).keydown(function)

25html97

html98

$(selector).keydown(function)

23>

html9<030403>

html9<09 10<512>1409>

html9<<3 html5<521>

_______71____424

25>27

2728

29>31

_______427____432

25<2

_______71____432

_______69____48____53____7

_______12____48____106>

8

$(selector).keydown(function)

02____7

________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

<html>

________số 8

<____10>

$(selector).keydown(function)

2<1>

_______43____615

36

$(selector).keydown(function)

2______48____41>

$(selector).keydown(function)

2____5<3 <4<5

<6>

$(selector).keydown(function)

2____48____53____7

$(selector).keydown(function)

2_______5html4 html5<5html7>

html9>0

>1>2

>1>4

_______71____496

>1>8

>1 0

>1 2

>1 4

>1 6

>1 8

>1<0

html9<2

$(selector).keydown(function)

2______48____64>

8

$(selector).keydown(function)

0____7

________số 8

<

$(selector).keydown(function)

02>

$(selector).keydown(function)

2____5

$(selector).keydown(function)

06>

html9<>0 html4<5>3>4

$(selector).keydown(function)

25>6

html98>0>

html9<

$(selector).keydown(function)

23____7

$(selector).keydown(function)

25 48

html98

$(selector).keydown(function)

23>

html9<030403>

html9<09 10<512 6509>

html9<<3 html5<521>

_______71____424

25 78

2728

29____882

_______427____432

25<2

_______71____432

_______69____48____53____7

_______12____48____106>

8

$(selector).keydown(function)

02____7

________số 8

8html<03

đầu ra

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

Ghi chú cá nhân của tôi arrow_drop_up

Tiết kiệm

Vui lòng Đăng nhập để nhận xét.

Các phím mũi tên trái và phải là gì?

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?

Mã khóa cho mũi tên phải là gì?

Mã khóa của mũi tên trái là gì?