jQuery: ปุ่มกด Backspace ไม่ทำงานใช่ไหม


186

ฉันสงสัยว่าฉันทำอะไรผิด:

$(".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();
   }
});

ฉันต้องการให้doSearch()ฟังก์ชั่นของฉันถูกไล่ออกเมื่อฉันกดBackspaceปุ่ม ในขณะนี้ไม่มีอะไรเกิดขึ้นเมื่อฉันกดBackspaceใน Chrome และ Safari

ความคิดใด ๆ


คุณสามารถลองใช้ปลั๊กอิน jQuery นี้code.google.com/p/js-hotkeysและใช้นามแฝงของคีย์ "backspace"
José Manuel Lucas

3
มันไม่ทำงานบนโครเมียม แต่ทำงานบน Firefox
vsync

ขออภัยสำหรับการจัดทำ necroposting แต่เป็นที่น่าสังเกตว่า e.which เป็นที่ต้องการมากกว่า e.keyCode
Henry Howeson

คำตอบ:


324

ใช้แทนkeyup keypressนี่จะได้รับรหัสคีย์ทั้งหมดเมื่อผู้ใช้กดบางสิ่ง


37
เหตุใดจึงต้องkeyupใช้ Backspace เมื่อkeypressไม่ต้องการ
Aaron Digulla

เป็นกรณี Keyup ยิงแบ็คสเปซ, ปุ่มกดไม่ได้ -> แปลก มีโอกาสที่จะตรวจสอบหรือไม่ว่ามีการกดปุ่มสองปุ่มเช่น cmd-c หรือ cmd-v หรือ cmd-a หรือไม่
แมตต์

17
มันขึ้นอยู่กับคีย์ คุณต้องการที่จะใช้keypressสำหรับEnterคีย์keydownสำหรับBackspaceและอื่น ๆ ; มิฉะนั้นคุณจะพบกิจกรรมในเบราว์เซอร์บางตัวไม่ได้ผลตามที่คุณคาดหวังโดยเฉพาะเมื่อคุณต้องการป้องกันพฤติกรรมเริ่มต้นของคีย์ เมื่อคุณใช้สิ่งที่ผิดสิ่งที่จะเกิดขึ้นคือเหตุการณ์ของคุณจะไม่ถูกจับเลย (เช่นในกรณีของ Backspace) หรือคุณไม่สามารถป้องกันได้ เพราะมันเกิดขึ้นแล้วก่อนที่จะจัดการรหัสเหตุการณ์ของคุณ
srcspider

5
ปัญหาของคำตอบนี้คือการใช้keyupจะทำให้แผงปุ่มตัวเลขแตก คุณรู้คำตอบที่ช่วยให้สามารถตรวจสอบคีย์ใด ๆ บนแป้นพิมพ์แบบเต็มหรือไม่
ฮิวจ์

6
keydownเป็นตัวเลือกที่ดีกว่าสำหรับคีย์ทั้งหมด
artfuldev

32

ฉันเจอสิ่งนี้ด้วยตัวเอง ฉันใช้.onแล้วมันดูต่างออกไปเล็กน้อย แต่ฉันก็ทำสิ่งนี้:

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

เพิ่มงานของฉันที่นี่ ฉันต้องการลบ ssn ที่พิมพ์โดยผู้ใช้ดังนั้นฉันจึงทำสิ่งนี้ใน 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
ใช้งานได้กับ Firefox ถ้าคุณใช้ event.which แทน event.keyCode api.jquery.com/event.which
BishopZ

11

หากคุณต้องการดำเนินการเหตุการณ์เฉพาะกับการเปลี่ยนแปลงการใช้ข้อมูลของคุณ:

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

inputยังไม่ได้สังเกตรหัสคีย์ สิ่งนี้จะไม่ทำงานเช่นกัน
Mark Pieszak - Trilon.io

3

อ้างอิงจากเอกสาร jQuery สำหรับ. keypress () มันไม่ได้จับตัวอักษรที่ไม่สามารถพิมพ์ได้ดังนั้น backspace จะไม่ทำงานกับ keypress แต่มันติดอยู่ใน keydown และ keyup:

เหตุการณ์ keypress ถูกส่งไปยังองค์ประกอบเมื่อเบราว์เซอร์ลงทะเบียนคีย์บอร์ด สิ่งนี้คล้ายกับเหตุการณ์ keydown ยกเว้นว่าตัวดัดแปลงและคีย์ที่ไม่พิมพ์เช่น Shift, Esc และลบเหตุการณ์ keydown ของทริกเกอร์ แต่ไม่ใช่เหตุการณ์ keypress ความแตกต่างอื่น ๆ ระหว่างสองเหตุการณ์อาจเกิดขึ้นขึ้นอยู่กับแพลตฟอร์มและเบราว์เซอร์ ( https://api.jquery.com/keypress/ )

ในบางกรณีการkeydownกดปุ่มไม่ต้องการหรือมีลักษณะพิเศษอื่น ๆ ที่ไม่พึงประสงค์และการกดปุ่มก็เพียงพอดังนั้นวิธีหนึ่งในการจัดการสิ่งนี้คือการใช้เพื่อจับการกดแป้นทั้งหมดแล้วตั้งค่าการหมดเวลาของช่วงเวลาสั้น ๆ เพื่อป้อนคีย์ หลังจากนั้น

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.