检测退格和del“输入”事件？

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（）之外，我的输入中不应该添加任何字符 实际上应该完全忽略用户的输入，只有按键动作对我来说很重要

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;
  });
});

Answer 2

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

Answer 3

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

Supported Browsers

Answer 4

您是否尝试过使用'onkeydown'？ 这是您正在寻找的事件。

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

Answer 5

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

Answer 6

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;
    }
});

Mozilla Docs

Supported Browsers

Answer 7

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

Answer 8

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

var oldInput = '',
    newInput = '';

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

Answer 9

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

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

Answer 10

Live demo

Javascript
<br>
<input id="input">
<br>
or
<br>
jquery
<br>
<input id="inpu">

<script type="text/javascript">
var myinput = document.getElementById('input');
input.onkeydown = function() {
  if (event.keyCode == 8) {
    alert('you pressed backspace');
    //event.preventDefault(); remove // to prevent backspace
  }

  if (event.keyCode == 46) {
    alert('you pressed delete');
    //event.preventDefault(); remove // to prevent delete
  }
};

//jquery code

$('#inpu').on('keydown', function(e) {
  if (event.which == 8) {
    alert('you pressed backspace');
    //event.preventDefault(); remove // to prevent backspace
  }

  if (event.which == 46) {
    alert('you pressed delete');
    //event.preventDefault(); remove // to prevent delete
  }
});
</script>