jQuery: keyPress Backspace sẽ không kích hoạt?


186

Tôi tự hỏi những gì tôi đang làm sai:

$(".s").keypress(function(e) {
   switch (e.keyCode) {
      case 8: // Backspace
      //console.log('backspace');
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
         break;

      default:
         doSearch();
   }
});

Tôi muốn doSearch()chức năng của tôi cũng bị sa thải khi tôi nhấn Backspacephím. Hiện tại hoàn toàn không có gì xảy ra khi tôi nhấn Backspacevào Chrome và Safari.

có ý kiến ​​gì không


Bạn có thể dùng thử plugin jQuery code code @p / js-hotkeys này và sử dụng bí danh khóa "backspace"
José Manuel Lucas

3
Nó không kích hoạt chrome nhưng trên Firefox.
vsync

Xin lỗi vì đã hoại tử nhưng điều đáng chú ý là e.which được ưu tiên hơn e.keyCode
Henry Howeson

Câu trả lời:


324

Sử dụng keyupthay vì keypress. Điều này nhận được tất cả các mã khóa khi người dùng nhấn một cái gì đó


37
Tại sao sẽ keyupbắn cho Backspace khi keypresskhông?
Aaron Digulla

đó là trường hợp. Keyup kích hoạt backspace, nhấn phím không -> lạ. cũng có cơ hội để kiểm tra xem hai phím được nhấn như cmd-c hay cmd-v hay cmd-a
matt

17
Nó thực sự phụ thuộc vào chìa khóa. Bạn muốn sử dụng keypresscho Enterkhóa, keydowncho Backspacevà vv; nếu không, bạn sẽ thấy các sự kiện của mình trong một số trình duyệt không thực sự hoạt động như bạn mong đợi, đặc biệt là khi bạn muốn ngăn chặn hành vi mặc định cho khóa. Khi bạn sử dụng sai, điều sẽ xảy ra là sự kiện của bạn hoàn toàn không được ghi lại (như trường hợp của Backspace) hoặc bạn không thể ngăn chặn sự kiện đó; vì nó đã xảy ra trước khi mã xử lý sự kiện của bạn đến được.
srcspider

5
Vấn đề với câu trả lời này là việc sử dụng keyupsẽ phá vỡ bàn phím số . Bạn có biết câu trả lời cho phép phát hiện chính xác bất kỳ phím nào trên bàn phím đầy đủ không?
hughes

6
keydownlà tùy chọn tốt hơn cho tất cả các phím
artfuldev

32

Tôi đã đi qua điều này bản thân mình. Tôi đã sử dụng .onđể nó trông hơi khác một chút nhưng tôi đã làm điều này:

 $('#element').on('keypress', function() {
   //code to be executed
 }).on('keydown', function(e) {
   if (e.keyCode==8)
     $('element').trigger('keypress');
 });

Thêm công việc của tôi quanh đây. Tôi cần xóa ssn được gõ bởi người dùng vì vậy tôi đã làm điều này trong jQuery

  $(this).bind("keydown", function (event) {
        // Allow: backspace, delete
        if (event.keyCode == 46 || event.keyCode == 8) 
        {
            var tempField = $(this).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            $('#' + hiddenID).val('');
            $(this).val('')
            return;
        }  // Allow: tab, escape, and enter
        else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else 
        {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&       (event.keyCode < 96 || event.keyCode > 105)) 
            {
                event.preventDefault();
            }
        }
    });

1
điều này hoạt động với firefox nếu bạn sử dụng event.which thay vì event.keyCode api.jquery.com/event.which
BishopZ

11

Nếu bạn muốn kích hoạt sự kiện chỉ khi thay đổi sử dụng đầu vào của bạn:

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});

inputcũng không quan sát keyCodes. Điều này cũng không hoạt động.
Mark Pieszak - Trilon.io

3

Theo tài liệu jQuery cho .keypress (), nó không bắt được các ký tự không in được, do đó, backspace sẽ không hoạt động trên phím nhấn, nhưng nó bị kẹt trong keydown và keyup:

Sự kiện nhấn phím được gửi đến một phần tử khi trình duyệt đăng ký nhập bàn phím. Điều này tương tự như sự kiện nhấn phím, ngoại trừ các phím bổ trợ và không in như Shift, Esc và xóa các sự kiện nhấn phím kích hoạt nhưng không phải là các sự kiện nhấn phím. Sự khác biệt khác giữa hai sự kiện có thể phát sinh tùy thuộc vào nền tảng và trình duyệt. ( https://api.jquery.com/keypress/ )

Trong một số trường hợp, keyup không mong muốn hoặc có các hiệu ứng không mong muốn khác và keydown là đủ, vì vậy một cách để xử lý việc này là sử dụng keydownđể bắt tất cả các lần nhấn phím sau đó đặt thời gian chờ của một khoảng thời gian ngắn để nhập khóa, sau đó xử lý sau đó.

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.