Javascript numberpad keycode phân tích

Question

Tôi đang cố gắng để phân tích các sự kiện KeyDown từ numberpad như sau:

$('#myDiv').keydown(function(e) { 
    val = String.fromCharCode(e.which) 
}); 

Vấn đề là bàn phím 0-9 mã phím trở lại của 96-105 đó, theo fromCharCode() là chữ thường a-i. Làm thế nào để tôi nhận được các sự kiện keydown của bảng số để giải quyết cho số thích hợp?

Answer 1

Bạn không: bạn sử dụng các sự kiện keypress. Sự kiện keypress là sự kiện duy nhất sẽ cung cấp cho bạn thông tin đáng tin cậy về các ký tự đã nhập. Mã hiện tại của bạn sẽ hoạt động nếu bạn chỉ cần thay đổi keydown thành keypress.

Answer 2

Giá trị which được chuyển đến keydown không phải là mã ký tự; đó là một mã khóa (và các mã khác nhau từ trình duyệt/OS đến trình duyệt/OS). Bạn có thể ánh xạ nó với một ký tự bằng cách sử dụng the tables on this page, nhưng để nói rằng công cụ này hơi ... khó xử ... sẽ là để giảm bớt trường hợp. :-)

Nếu không, đặt cược tốt nhất của bạn là đợi sự kiện keypress, sẽ có mã ký tự (nếu có) thay vì mã khóa.

Ví dụ: Live copy | Live source

jQuery(function($) { 

    $("#theField") 
    .keydown(function(event) { 
     showKey("keydown", event.which); 
    }) 
    .keypress(function(event) { 
     showKey("keypress", event.which); 
    }) 
    .focus(); 

    function showKey(eventName, which) { 
    display(eventName + 
      ": " + which + " (" + 
      String.fromCharCode(which) + ")"); 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

Sử dụng HTML này:

<input type="text" id="theField"> 

Answer 3

Có một cách để làm điều này với KeyDown, nếu bấm phím là không khả thi do nhu cầu hủy bỏ sự kiện, vv Sử dụng một tuyên bố if() với thử nghiệm này:

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58 

OR, với các sự kiện jQuery:

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58 

Ví dụ này giả định "sự kiện" là sự kiện keydown. keyIdentifier là một số thập lục phân đại diện cho giá trị unicode cho char liên quan. Sử dụng keyIdentifier, số từ bàn phím số/bàn phím VÀ các con số trên bàn phím QWERTY của bạn sẽ có cùng giá trị, 48 - 57 (U + 0030 - U + 0039), ngay cả với sự kiện keyDown.

Giá trị Unicode trong trình duyệt sẽ trông giống như U + 0030 hoặc U + 002F. Phân tích cú pháp chuỗi này để chỉ nhận giá trị thập lục phân, sau đó sử dụng parseInt() với một cơ số 16 để chuyển đổi nó thành base-10.

Answer 4

Câu trả lời ở đây hiện đã lỗi thời vì KeyboardEvent.which, KeyboardEvent.keyCode và KeyboardEvent.charCode đều không còn được dùng nữa.

Cách thích hợp cho các phiên bản mới nhất của Firefox, Chrome, IE/Edge và Safari để lấy khóa ký tự là sử dụng KeyboardEvent.key và nó sẽ hoạt động với bất kỳ sự kiện quan trọng nào, không chỉ keypress.

KeyboardEvent.key Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.key));

<input placeholder="Start typing...">

---

Nếu bạn vẫn cần phải có được mã số nhân vật, bạn nên sử dụng KeyboardEvent.code tài sản.

KeyboardEvent.code Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.code));

<input placeholder="Start typing...">

Answer 5

bạn có thể sử dụng KeyDown và phát hiện các phím numpad. Tôi đã làm nó bằng cách sử dụng mã sau đây. Trừ 48 từ khóa numpad trước khi diễn giải khóa

function navigate(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode >= 96 && keyCode <= 105) { 
      // Numpad keys 
      keyCode -= 48; 
     } 
     var txtVal = String.fromCharCode(keyCode);