Làm thế nào để tìm ra phím ký tự được nhấn?

118

Tôi muốn tìm hiểu phím ký tự nào được nhấn theo cách tương thích với nhiều trình duyệt trong Javascript thuần túy.

javascript dom-events keypress

— xXx
nguồn

1

Không phải tất cả những câu trả lời này cho câu hỏi "phím gì được nhấn?" Điều gì sẽ xảy ra nếu, khi nó đang thực thi, mã javascript muốn biết liệu một phím trên bàn phím hiện có bị giữ hay không?

— mwardm

2

event.keysẽ trực tiếp cung cấp cho bạn char được ép

— Gibolt

158

JavaScript "Xóa":

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

— Coyod
nguồn

6

điều này hoạt động tốt cho các ký tự chữ cái, nhưng còn các dấu chấm / dấu ngoặc và các ký hiệu typogtaphic khác thì sao?

— VoVaVc

6

@VoVaVc: Nó cũng hoạt động cho những người đó. Điều quan trọng là sử dụng keypresssự kiện, cung cấp cho bạn mã ký tự, thay vì keyuphoặc keydowncung cấp cho bạn mã khóa.

— Tim Down

2

@aljgom, e.keyvẫn không có hỗ trợ trình duyệt đầy đủ.

— Andy Mercer

1

Không hoạt động với các biểu tượng mà bạn phải nhấn shift để thực hiện, như!

— Curtis

5

Khóa @AndyMercer hiện được hỗ trợ bởi tất cả các trình duyệt chính: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

— Ray

34

Có một triệu bản sao của câu hỏi này ở đây, nhưng dù sao thì ở đây cũng sẽ lặp lại:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

Tham khảo tốt nhất về các sự kiện chính mà tôi đã xem là http://unixpapa.com/js/key.html .

— Tim Down
nguồn

23

Gần đây hơn và sạch hơn nhiều: sử dụng event.key. Không còn mã số tùy ý!

LƯU Ý: Các thuộc tính cũ ( .keyCodevà .which) không được dùng nữa.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

Nếu bạn muốn đảm bảo chỉ nhập các ký tự đơn lẻ, hãy kiểm tra key.length === 1hoặc đó là một trong các ký tự bạn mong đợi.

Tài liệu Mozilla

Các trình duyệt được hỗ trợ

— Gibolt
nguồn

Đây có phải là cho node.js không?

— merrybot

Không, nút chỉ có nghĩa là bất kỳ phần tử DOM nào. Nếu bạn có Node.js kết nối với giao diện người dùng, tôi cho rằng nó sẽ hoạt động

— Gibolt

keydown cho một số thiết bị di động không hoạt động, nó trả về không xác định

— Angelotti

4

Thử:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

Mở rộng đoạn mã

* Lưu ý: điều này hoạt động trong "Chạy đoạn mã"

Trang web này làm tương tự như mã của tôi ở trên: Keycode.info

— lewdev
nguồn

1

Sử dụng cái này:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

— JCasso
nguồn

1

**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

— kki3908050
nguồn

1

Đây không phải là bản sao gần chính xác với câu trả lời năm 2009 của @ Coyod?

— Chris F Carroll

1

Một trong những thư viện yêu thích của tôi để làm điều này một cách tinh vi là Mousetrap .

Nó được cung cấp với nhiều loại plugin, một trong số đó là recordplugin có thể xác định chuỗi các phím được nhấn.

Thí dụ:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

— dipole_moment
nguồn

@DanLowe Tôi vừa thêm một đoạn mã.

— dipole_moment

Uncaught TypeError: Mousetrap.record không phải là một hàm tại recordSequence (****. Html: 12) tại HTMLButtonElement.onclick (****. Html: 20)

— Irrmich

-2

document.onkeypress = function(event){
    alert(event.key)
}

— gomozor
nguồn