检测退格和del"输入"事件?

Ale*_*lex 85 javascript jquery

怎么做?

我试过了:

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

if(key == 8) alert('backspace');
Run Code Online (Sandbox Code Playgroud)

但它不起作用......

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


我的代码:

  $('#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);
  });
Run Code Online (Sandbox Code Playgroud)

我的输入中不应该添加任何字符,除了我添加的val()实际上应该完全忽略用户的输入,只有按键动作对我来说很重要

Wou*_*r J 105

使用.onkeydown和取消删除return false;.像这样:

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

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

    if( key == 8 || key == 46 )
        return false;
};
Run Code Online (Sandbox Code Playgroud)

或者使用jQuery,因为您在问题中添加了一个jQuery标记:

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

    if( key == 8 || key == 46 )
        return false;
  });
});
Run Code Online (Sandbox Code Playgroud)

  • 如果您想通过右键单击>粘贴来捕获输入,该怎么办? (18认同)
  • ``keydown``在Chrome Android中不起作用,它在单击退格键或del时返回空白 (4认同)
  • 在函数中,我们必须将事件保持为参数,然后只有它才能像函数(事件)-------------------------- var input = document一样工作.的getElementById( 'myInput'); input.onkeydown = function(event){var key = event.keyCode || event.charCode; if(key == 8 || key == 46)return false; }; (2认同)

Ser*_*zN1 11

用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;
});
Run Code Online (Sandbox Code Playgroud)

  • 我一直在使用jQuery,但还没有看到这个。学习新东西总是好的。+1! (2认同)

Gib*_*olt 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;
    }
});
Run Code Online (Sandbox Code Playgroud)

Mozilla文件

支持的浏览器


Gib*_*olt 8

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;
    }
});
Run Code Online (Sandbox Code Playgroud)

现代风格:

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

Mozilla 文档

支持的浏览器


Bra*_*ell 5

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

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