Cách chụp một không gian lùi trên sự kiện onkeydown

Question

Tôi có một chức năng được kích hoạt bởi sự kiện onkeydown của hộp văn bản. Làm cách nào để biết liệu người dùng đã nhấn phím xóa hoặc phím xóa?

Answer 1

Hãy thử điều này:

document.addEventListener("keydown", KeyCheck); //or however you are calling your method 
function KeyCheck(event) 
{ 
    var KeyID = event.keyCode; 
    switch(KeyID) 
    { 
     case 8: 
     alert("backspace"); 
     break; 
     case 46: 
     alert("delete"); 
     break; 
     default: 
     break; 
    } 
} 

Answer 2

Trong kiểm tra chức năng của bạn cho keycode 8 (backspace) hoặc 46 (xóa)

Keycode information
Keycode list

Answer 3

không chắc chắn nếu nó hoạt động bên ngoài của firefox :

callback (event){ 
    if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE) 
    // do something 
    } 
} 

nếu không, hãy thay event.DOM_VK_BACK_SPACE với 8 và event.DOM_VK_DELETE với 46 hoặc xác định chúng như không đổi (để có thể đọc tốt hơn)

Answer 4

Ngày nay, mã để làm điều này nên giống như thế:

document.getElementById('foo').addEventListener('keydown', function (event) { 
    if (event.keyCode == 8) { 
     console.log('BACKSPACE was pressed'); 

     // Call event.preventDefault() to stop the character before the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
    if (event.keyCode == 46) { 
     console.log('DELETE was pressed'); 

     // Call event.preventDefault() to stop the character after the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
}); 

mặc dù trong tương lai, một khi chúng được hỗ trợ rộng rãi trong các trình duyệt, bạn có thể muốn sử dụng các thuộc tính .key hoặc .code của KeyboardEvent thay vì không được chấp nhận .keyCode.

chi tiết có giá trị biết:

• Calling event.preventDefault() trong xử lý của một sự kiện KeyDown sẽ ngăn chặn những tác động mặc định của phím nhấn. Khi nhấn một ký tự, điều này sẽ ngăn không cho nó được nhập vào trường văn bản đang hoạt động. Khi nhấn phím xóa lùi hoặc xóa trong trường văn bản, nó sẽ ngăn không cho ký tự bị xóa. Khi nhấn backspace mà không có trường văn bản đang hoạt động, trong trình duyệt như Chrome, nơi backspace đưa bạn trở lại trang trước, nó ngăn chặn hành vi đó (miễn là bạn nắm bắt sự kiện bằng cách thêm trình xử lý sự kiện của bạn vào document thay vì trường văn bản).

• Tài liệu về cách giá trị của thuộc tính keyCode được xác định có thể được tìm thấy trong phần B.2.1 How to determine keyCode for keydown and keyup events trong Đặc điểm sự kiện giao diện người dùng của W3. Đặc biệt, các mã cho Backspace và Delete được liệt kê trong B.2.3 Fixed virtual key codes.

• Có một nỗ lực đang được thực hiện để phản đối thuộc tính .keyCode có lợi cho .key and .code. W3 mô tả tài sản .keyCode là "legacy" và MDN là "deprecated".

  Một lợi ích của sự thay đổi để .key và .code là có mạnh hơn và lập trình thân thiện với xử lý các phím phi ASCII - xem the specification that lists all the possible key values, đó là chuỗi con người có thể đọc được như "Backspace" và "Delete" và bao gồm giá trị cho tất cả mọi thứ từ các phím modifier cụ thể sang bàn phím tiếng Nhật để che khuất các phím media. Khác, có liên quan cao đến câu hỏi này, phân biệt giữa ý nghĩa của một phím bấm được sửa đổi và phím vật lý đã được nhấn.

  On small Mac keyboards, không có Xóa chủ chốt, chỉ có một Backspace then chốt. Tuy nhiên, bức xúc Fn +Backspace tương đương với nhấn Xóa trên một bàn phím thông thường - nghĩa là, nó sẽ xoá nhân vật sau con trỏ văn bản thay vì một trước khi nó. Tùy thuộc vào trường hợp sử dụng của bạn, trong mã bạn có thể muốn xử lý một báo chí của Backspace với Fn được giữ dưới dạng Backspace hoặc Delete. Đó là lý do tại sao mô hình khóa mới cho phép bạn chọn.

  Thuộc tính .key mang đến cho bạn nghĩa của phím nhấn, vì vậy Fn +Backspace sẽ mang lại chuỗi "Delete". Thuộc tính .code cung cấp cho bạn khóa vật lý, vì vậy, Fn + Backspace vẫn sẽ hiển thị chuỗi "Backspace".

  Thật không may, khi viết câu trả lời này, chúng chỉ là supported in 18% of browsers, vì vậy nếu bạn cần khả năng tương thích rộng, bạn bị kẹt với thuộc tính "legacy" .keyCode trong thời gian này. Nhưng nếu bạn là người đọc từ tương lai, hoặc nếu bạn đang nhắm mục tiêu một nền tảng cụ thể và biết nó hỗ trợ giao diện mới, sau đó bạn có thể viết mã mà nhìn một cái gì đó như thế này:

  document.getElementById('foo').addEventListener('keydown', function (event) { 
      if (event.code == 'Delete') { 
       console.log('The physical key pressed was the DELETE key'); 
      } 
      if (event.code == 'Backspace') { 
       console.log('The physical key pressed was the BACKSPACE key'); 
      } 
      if (event.key == 'Delete') { 
       console.log('The keypress meant the same as pressing DELETE'); 
       // This can happen for one of two reasons: 
       // 1. The user pressed the DELETE key 
       // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where 
       // FN+BACKSPACE deletes the character in front of the text cursor, 
       // instead of the one behind it. 
      } 
      if (event.key == 'Backspace') { 
       console.log('The keypress meant the same as pressing BACKSPACE'); 
      } 
  }); 
  

Answer 5

sự kiện .key === "Backspace" hoặc "Delete"

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

input.addEventListener('keydown', function(event) { 
    const key = event.key; // const {key} = event; ES6+ 
    if (key === "Backspace" || key === "Delete") { 
     return false; 
    } 
}); 

Mozilla Docs

Supported Browsers