检测退格键并在“输入”事件上删除?


93

怎么做?

我试过了:

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

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

但这行不通...

如果我在keypress事件上执行相同的操作,那么它将起作用,但是我不想使用keypress,因为它会在我的输入字段中输出键入的字符。我需要能够控制


我的代码:

  $('#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
实际上,您实际上不需要执行“或”事件。这很好,jQuery会为您标准化事件对象。参见api.jquery.com/category/events/event-object
Niko

您应该将事件的名称作为的第一个参数.bind,而不是选择器。应该是$('content').bind('keypress', ...
pmrotule '16

Answers:


119

使用.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 2013年

6
keydown不适用于Chrome Android,单击退格键或del时返回空白
Kosmetika 2014年

2
在函数中,我们必须将事件保留为参数,然后才可以像function(event)一样工作-------------------------- var input = document。 getElementById('myInput'); input.onkeydown =功能(事件){var键= event.keyCode || event.charCode; if(键== 8 ||键== 46)返回false; };
Anurag_BEHS

1
使用jQuery时,它会在内部过滤事件enterbackspaceinput事件上进行按键操作,而这些按键无法达到目标
vsync

@Wouter-没什么大不了的,但是我认为jquery的代码中有错别字。我认为您的意思是将参数名称“ event”添加到on-keydown事件处理程序中。
RoboBear

14

使用jQuery

event.which财产归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

9

event.key ===“退格”

最近更新,更清洁:使用event.key。没有更多的任意数字代码!

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

Mozilla文件

支持的浏览器


有时由于我无法理解的原因,event.key返回“ Process” ...
Oscar Chambers

那是受支持的浏览器。您可能有错误,或者自定义键盘没有触发按键事件
Gibolt,

3

您是否尝试过使用“ onkeydown”?这是您正在寻找的事件。

它在插入输入之前运行,并允许您取消char输入。


但是如何取消呢?因为我在输入上使用了val()并且它仍然附加了键入的字符
Alex

3
怎么event.preventDefault()
Niko 2012年

return false;使用jQuery时,您可以简单地取消任何事件。
iMoses 2012年

3

这是一个老问题,但是如果您想在输入时捕获一个退格事件,而不是按下,按下,按下或按下键盘,因为我注意到其中任何一个都破坏了我编写的某些功能,并且由于自动文本格式而导致尴尬的延迟—您可以使用inputType捕获退格键:

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

3

keydownevent.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文件

支持的浏览器



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

在使用chrome的android设备上,我们无法检测到退格键。您可以使用解决方法:

var oldInput = '',
    newInput = '';

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

我真的不希望这是答案,但它似乎是,因为他们成立whichkeyCode以229必须有一个更好的办法,或者即将推出一个更好的办法,但我将使用这基本上现在。 ..
JohnnyFun
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.