检测 "input" 事件中的退格和删除键？

Question

怎么做？

我尝试过：

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() 添加的内容，输入框中不应追加任何字符。实际上，用户的输入应完全被忽略，只有按键操作对我很重要。

- Alex

---

你实际上不需要执行“或”运算符 - event.which 就足够了，因为 jQuery 会为你规范化事件对象。请参考 http://api.jquery.com/category/events/event-object/。 - Niko

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

Answer 1

使用.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;
  });
});

​

- Wouter J

---

如果你想从右键单击>粘贴中获取输入，该怎么办？ - ctb

keydown 在 Chrome Android 中无法工作，点击退格键或删除键时返回空值。 - Kosmetika

在函数中，我们必须将事件作为参数保留，否则它将无法工作，例如：function(event) -------------------------- var input = document.getElementById('myInput'); input.onkeydown = function(event) { var key = event.keyCode || event.charCode; if( key == 8 || key == 46 ) return false; }; - Anurag_BEHS

使用jQuery时，它会在输入事件中内部过滤回车和退格键，并且这些按键不会到达它。 - vsync

@Wouter -- 不是什么大问题，但我认为jquery代码中有一个错别字。我认为你想在on-keydown事件处理程序中添加参数名“event”。 - RoboBear

Answer 2

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 文档

支持的浏览器

- Gibolt

---

有时候 event.key 会返回一个我无法理解的 "Process"。 - Oscar Chambers

那是一个受支持的浏览器。你可能有一个错误，或者你的自定义键盘没有触发 keydown 事件。 - Gibolt

Answer 3

使用jQuery

event.which属性将标准化event.keyCode和event.charCode。 建议监视键盘输入的event.which。

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

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

- SerzN1

---

我已经使用jQuery很长时间了，但从未见过这种用法。学到新知识总是好的。+1！ - Sablefoste

Answer 4

虽然这个问题比较老，但如果您想在输入时捕获退格事件，而不是keydown、keypress或keyup事件——因为我注意到其中任何一个都会破坏我编写的某些函数并导致自动文本格式化存在尴尬的延迟——您可以使用inputType来捕获退格。

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

- Brandon McConnell

Answer 5

keydown 与 event.key === "Backspace" 或 "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文档

支持的浏览器

- Gibolt

Answer 6

你尝试使用过'onkeydown'吗？这就是你要找的事件。

它在输入插入之前运行，并允许您取消字符输入。

- iMoses

---

但是我该如何取消它呢？因为我正在输入框上使用val()，但它仍然会追加已键入的字符。 - Alex

event.preventDefault() 是什么意思？ - Niko

当使用jQuery时，您可以简单地使用return false;来取消任何事件。 - iMoses

Answer 7

在使用Chrome的Android设备上，我们无法检测到退格键。您可以使用以下解决方法：

var oldInput = '',
    newInput = '';

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

- Aafaq Ahmad

---

我真的不想这成为答案，但似乎是这样，因为他们将“which”和“keyCode”设置为229。肯定会有更好的方法，或者很快会有更好的方法，但现在我暂时只能使用基本上这个... - JohnnyFun

谢谢，我正在寻找安卓设备。 - Prateek Chaubey

Answer 8

$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});

- Phanikumar Jatavallabhula

---

键码 8 表示“退格键”。 - Phanikumar Jatavallabhula

问题是关于退格和删除，而不是退格和回车。 - Paul

它将始终返回false，应嵌套if。 - Ansyori

Answer 9

< p > InputEvent.inputType 可用于检测退格键 Mozilla 文档。 它适用于 Chrome 桌面版、Chrome Android 和 Safari iOS。 < /p >

<input type="text" id="test" />

<script>  
  document.getElementById("test").addEventListener('input', (event) => {
  console.log(event.inputType);
  // Typing of any character event.inputType = 'insertText'
  // Backspace button event.inputType = 'deleteContentBackward'
  // Delete button event.inputType = 'deleteContentForward'
  })
</script>

- Serge Che

Answer 10

//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 += "-"
    } 
}

- user2125311