输入删除/撤销的事件处理程序

Question

我需要检查所有会更改文本输入框内容的事件。目前我已经处理了 keyup、cut 和 paste 事件，但高亮文本并点击删除或撤销也可以更改文本内容。是否有办法监听这些事件？

$('#input').on('paste cut  keyup ',function() {
    //add delete and undo to listner
});     

- user2014429

Answer 1

你不仅需要解决这个问题，还需要担心具有自动填充功能的浏览器等问题。因此，HTML5包含了input事件，该事件已包含在现代浏览器中。

请参见此答案以获取一种捕获浏览器将允许您捕获的每个可想象的更改事件(*)的方法，而不会触发超过一次的更改。 _{(*) 看起来他们忘记了cut，所以也要添加。}

- Plynx

---

谢谢提供的链接，我在那里找到了答案，代码如下：.bind('DOMAttrModified textInput input change keypress paste focus', function (){ // handle }); - user2014429

Answer 2

我建议使用 keydown 和 input：http://jsfiddle.net/vKRDR/

var timer;
$("#input").on("keydown input", function(){
    var self = this;
    clearTimeout(timer)
    // prevent event from happening twice
    timer = setTimeout(function(){
        console.log(self.value);
    },0);
});

keyup无法捕获诸如ctrl之类的特殊键，而input将捕获来自上下文菜单的粘贴、删除等内容。

通过使用keydown和input，事件会立即发生，而不是等待用户释放按钮或模糊输入。

keydown完成大部分工作，input则处理keydown无法处理的内容，例如上下文菜单中的删除/粘贴/剪切操作。

- Kevin B

---

注意，在进一步测试后...你应该能够只使用输入而不必担心它是否与IE向后兼容。 - Kevin B

Answer 3

使用这些，它们会获取所有更改：

$(container).bind('keyup input propertychange paste change'), function (e){});

另外，您可以在此onchange事件中执行一项操作来检查其内部的值：

$(function(){
  $('input').on('keyup input propertychange paste change', function(){
      if ($(this).data('val')!=this.value) {
          alert('Something has been changed in the input.');
      }
      $(this).data('val', this.value);
  });
});

希望这在您的情况下能够发挥作用。 :)

- Annie Shahid

Answer 4

使用此方法来检测输入值的删除操作。

document.getElementById("my_id_name").oninput = function(e) {
     if ((e.inputType == 'deleteContentBackward') || (e.inputType == 'deleteContentForward') || (e.inputType == 'deleteByCut')){
            $('my_id_name').value = null
        })
 }

- Appasaheb Tuwar

Answer 5

你至少缺少了keypress和change事件。我不知道"change"是否适用于这些操作，但我知道当输入元素失去焦点时通常会触发change事件。

- Master Yogurt

Answer 6

使用change事件。 $('#input').on('change', function(){});

- Iain

---

一般情况下，改变只有在失去焦点时才触发。 - Plynx