如何检测文本区域的任何更改？

Question

我目前已将我的 textarea 绑定到几个似乎有效的事件。但是，问题在于事件会重叠并触发多次，这反过来又会大大降低性能。

我想要做的几乎就是捕捉到文本区域的任何更改：单击、粘贴、keyup、keydown、右键单击上下文菜单编辑（右键单击、剪切/删除/粘贴）、拖放等。这有可以跨浏览器工作，至少到 IE8。当您使用箭头键或类似键在文本区域中移动插入符号时，必须触发事件（我根据插入符号位置处理更改等）。

我不能使用任何重大延迟。一旦你对 textarea 做一些事情，事件必须立即触发并执行我在那里的任何代码。

我目前正在使用 jQuery 来绑定事件，但我可以使用纯 javascript 解决方案，只要它可以跨浏览器工作并执行我想要的操作。

这是我目前使用的代码：

var deadKeycodes = [16, 17, 18, 19, 20, 
                    27, 33, 34, 35, 36,
                    38, 40, 44, //37 = left arrow and 39 = right arrow removed, it needs to trigger on those
                    45, 112, 113, 114, 115,
                    116, 117, 118, 119, 120,
                    121, 122, 123, 144, 145];

$(original).bind('propertychange keyup keydown input click', function(e) { 
    if (!Array.prototype.indexOf || deadKeycodes.indexOf(e.keyCode) == -1) { // prevent execution when pressing a 'dead' key
         //do stuff here
    }
});

如果有什么不清楚的地方就问吧，我会为你澄清的:)

Answer 1

我认为从阻止多个事件触发的意义上说，您无法真正“解决”问题。 Keyup 和 keydown 确实是不同的事件，并且发生在不同的时间。如果您想对两者都做出响应（您可能会这样做，因为按下键和向上键都可能会更改文本区域），则需要包含这两个事件。但是，大多数情况下，它们几乎会同时触发（并且连续多次触发），正如您所指出的那样，这可能会造成性能问题。

相反，您可能应该考虑触发 throttled 或 debounced 回调。受限制的回调只会每 n 毫秒触发一次（适用于可能被调用过多的函数）。去抖回调只会在事件流完成后触发；自上次回调后经过 n 毫秒后。

您可以使用下划线的debounce 和throttle 函数轻松完成此操作。

类似：

debouncedFn = _.debounce(function(e) { 
    if (!Array.prototype.indexOf || deadKeycodes.indexOf(e.keyCode) == -1) { // prevent execution when pressing a 'dead' key
         //do stuff here
    }
}, 100);

$(original).bind('propertychange keyup keydown input click', debouncedFn);

Answer 2

你的原作太过分了。您只需要input 和propertychange 事件。

2016 年更新

原来链接的页面现在已经消失了。这是它的一个稍微次优的快照：

http://web.archive.org/web/20140810185102/http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

这是一个答案，演示了使用 input 事件并在 IE propertychange：

Catch only keypresses that change input?

Answer 3

为防止事件重叠，您可以存储上次调用的时间。在执行事件的回调之前，请测试是否有足够的时间再次触发。

$(original).bind('propertychange keyup keydown input click', (function () {
    var lastCallTime = 0;

    return function (e) {
        if (Date.now() - lastCallTime < 50) { return; } // Too little time has passed--exit

        if (!Array.prototype.indexOf || deadKeycodes.indexOf(e.keyCode) == -1) {
            lastCallTime = Date.now();

            // your code...
        }
    };
}()));

Answer 4

这似乎在 IE7-9 和 Chrome 中解决了，其余的还没有测试。无论更改是什么，每次更改只会发生一个 console.log。如果没有更改，则不会记录任何内容：http://jsfiddle.net/SJN6J/2/

var timer;
$("textarea").on("keydown paste cut", function(){
    clearTimeout(timer);
    var origvalue = this.value, self = this;
    timer = setTimeout(function(){
        if ( origvalue !== self.value ) {
            console.log("it changed!");
            // do stuff because content changed
        }
    },0);
});

注意：我的 IE7-8 测试是在 IE9 更改浏览器模式的情况下进行的，因此您可能想做真正的 IE7-8 测试。