ตรวจจับ backspace และ del ในเหตุการณ์“ input”?


95

ต้องทำอย่างไร?

ฉันเหนื่อย:

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

แต่ไม่ได้ผล ...

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


รหัสของฉัน:

  $('#content').bind('input', function(event){

    var text = $(this).val(),
        key = event.which || event.keyCode || event.charCode;

    if(key == 8){
      // here I want to ignore backspace and del
    }

    // here I'm doing my stuff
    var new_text = 'bla bla'+text;
    $(this).val(new_text);
  });

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


3
คุณไม่จำเป็นต้องทำ or'ing - event ซึ่งก็ใช้ได้ jQuery ทำให้วัตถุเหตุการณ์เป็นปกติสำหรับคุณ ดูapi.jquery.com/category/events/event-object
Niko

คุณควรใส่ชื่อเหตุการณ์เป็นอาร์กิวเมนต์แรก.bindไม่ใช่ตัวเลือก ควรจะเป็น$('content').bind('keypress', ...
pmrotule

คำตอบ:


123

ใช้.onkeydownและยกเลิกการลบด้วยreturn false;. แบบนี้:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

หรือด้วย jQuery เนื่องจากคุณเพิ่มแท็ก jQuery ในคำถามของคุณ:

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});


19
จะเกิดอะไรขึ้นหากคุณต้องการรับข้อมูลจากการคลิกขวา> วาง
ctb

6
keydownไม่ทำงานใน Chrome Android จะส่งคืนความว่างเปล่าเมื่อคลิก backspace หรือ del
Kosmetika

2
ในฟังก์ชั่นเราต้องเก็บ event เป็นพารามิเตอร์จากนั้นมันจะทำงานเหมือน function (event) -------------------------- var input = document getElementById ('myInput'); input.onkeydown = function (เหตุการณ์) {var key = event.keyCode || event.charCode; ถ้า (คีย์ == 8 || คีย์ == 46) ส่งคืนเท็จ };
Anurag_BEHS

1
ด้วย jQuery จะกรองenterและbackspaceคีย์ภายในinputเหตุการณ์และการกดปุ่มเหล่านี้ไม่สามารถเข้าถึงได้
vsync

@ เราเตอร์ - ไม่ใช่ว่าจะเป็นเรื่องใหญ่ แต่ฉันคิดว่ามีการพิมพ์รหัสสำหรับ jquery ผิด ฉันคิดว่าคุณต้องการเพิ่มชื่อพารามิเตอร์ "เหตุการณ์" ลงในตัวจัดการเหตุการณ์เมื่อคีย์ดาวน์
RoboBear

14

ด้วย jQuery

event.whichคุณสมบัติ normalizes event.keyCode และ event.charCode ขอแนะนำให้ดูเหตุการณ์ซึ่งสำหรับการป้อนคีย์แป้นพิมพ์

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});

2
ฉันใช้ jQuery มานานแล้ว แต่ไม่เห็นสิ่งนี้ เรียนรู้สิ่งใหม่ ๆ ได้ดีเสมอ +1!
Sablefoste

10

event.key === "Backspace"

อื่น ๆ event.keyที่ผ่านมาและทำความสะอาดมากใช้งาน: ใช้ ไม่มีรหัสตัวเลขโดยพลการอีกต่อไป!

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

Mozilla Docs

เบราว์เซอร์ที่รองรับ


บางครั้ง event.key ส่งคืน "กระบวนการ" ด้วยเหตุผลที่ฉันไม่เข้าใจ ...
Oscar Chambers

นั่นคือเบราว์เซอร์ที่รองรับ คุณอาจมีข้อบกพร่องหรือบางทีแป้นพิมพ์ที่กำหนดเองของคุณจะไม่เริ่มการทำงานของเหตุการณ์
คีย์ดาวน์

3

คุณได้ลองใช้ 'onkeydown' แล้วหรือยัง? นี่คืองานที่คุณกำลังมองหา

ทำงานก่อนที่จะใส่อินพุตและอนุญาตให้คุณยกเลิกอินพุตถ่าน


แต่ฉันจะยกเลิกได้อย่างไร เพราะฉันใช้ val () กับอินพุตและมันยังต่อท้ายอักขระที่พิมพ์
Alex

3
แล้วไงevent.preventDefault()?
Niko

คุณสามารถreturn false;ยกเลิกเหตุการณ์ใด ๆ เมื่อใช้ jQuery
iMoses

3

มันเป็นคำถามเก่า แต่ถ้าคุณต้องการจับเหตุการณ์ backspace ในการป้อนข้อมูลไม่ใช่การคีย์ลงการกดแป้นหรือการกดปุ่ม - อย่างที่ฉันสังเกตเห็นว่าฟังก์ชันใดฟังก์ชันหนึ่งที่ฉันได้เขียนผิดไปและทำให้เกิดความล่าช้าอย่างน่าอึดอัดด้วยการจัดรูปแบบข้อความอัตโนมัติ - คุณสามารถจับ backspace โดยใช้ inputType:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});

3

keydown ด้วย event.key === "Backspace" or "Delete"

อื่น ๆ event.keyที่ผ่านมาและทำความสะอาดมากใช้งาน: ใช้ ไม่มีรหัสตัวเลขโดยพลการอีกต่อไป!

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

สไตล์โมเดิร์น:

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Mozilla Docs

เบราว์เซอร์ที่รองรับ



0
//Here's one example, not sure what your application is but here is a relevant and likely application 
function addDashesOnKeyUp()
{
    var tb = document.getElementById("tb1"); 
    var key = event.which || event.keyCode || event.charCode;

    if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) ) 
    {
        tb.value += "-"
    } 
}

0

บนอุปกรณ์ Android ที่ใช้ chrome เราตรวจไม่พบ backspace คุณสามารถใช้วิธีแก้ปัญหาได้:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })

ฉันไม่ต้องการให้คำตอบนี้เป็นคำตอบจริงๆ แต่ดูเหมือนว่าจะเป็นเพราะพวกเขาตั้งค่าwhichและkeyCodeเป็น 229 มันต้องมีวิธีที่ดีกว่าหรือวิธีที่ดีกว่าในไม่ช้านี้ แต่ฉันจะใช้โดยพื้นฐานในตอนนี้ ..
JohnnyFun
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.