Javascript <input> 文本更改事件

<input> text change events

提问by nornagon

Is there a library that can extract all text events from an <input type=text>(or contentEditable -- any one-line input field) element?

是否有一个库可以从<input type=text>（或 contentEditable - 任何单行输入字段）元素中提取所有文本事件？

In particular, I need to know whenever the text is changed by:

特别是，我需要知道何时通过以下方式更改文本：

• typing (asdf, backspace)
• cut/paste
• key combo actions (e.g. ctrl+bksp or option+bksp deletes the previous word)
• dragged & dropped text
• edit menu actions

• 打字（asdf，退格）
• 剪切/粘贴
• 键组合操作（例如 ctrl+bksp 或 option+bksp 删除前一个单词）
• 拖放的文本
• 编辑菜单操作

And preferably what it was that changed (whether and what text was inserted, deleted, or replaced).

最好是改变了什么（插入、删除或替换的文本和内容）。

Needs to work on Chrome, Safari, Firefox 3+, IE9+.

需要在 Chrome、Safari、Firefox 3+、IE9+ 上工作。

回答by Andy E

The HTML5 oninputevent is supported by all those browsers and works very much like the onchangeevent, but fires as soon as the element's input changes. It also bubbles, so you can capture it further up the document tree.

oninput所有这些浏览器都支持HTML5事件，它的工作方式与onchange事件非常相似，但只要元素的输入发生变化就会触发。它也会冒泡，因此您可以在文档树中进一步捕获它。

element.oninput = function () {

}

Working demo: http://jsfiddle.net/Zfthe/

工作演示：http: //jsfiddle.net/Zfthe/

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

回答by tomtg

I had a similar problem yesterday and came up with a solution to diff old and new text input values.

我昨天遇到了类似的问题，并想出了一个解决方案来区分新旧文本输入值。

The output is like this:

输出是这样的：

Old value: test test
New value: test w
Change: overwrote 'test' with 'w' at position 5

旧值：test test
新值：test w
更改：在位置 5 用 'w' 覆盖 'test'

The script uses window.setInterval() to avoid cross browser problems (see https://stackoverflow.com/a/1949416/727190). This causes some changes to be batched when the user types really fast - this could be a good thing, depends on your situation.

该脚本使用 window.setInterval() 来避免跨浏览器问题（参见https://stackoverflow.com/a/1949416/727190）。当用户输入非常快时，这会导致一些更改被批处理 - 这可能是一件好事，取决于您的情况。

You can, however, easily modify the script to work off events.

但是，您可以轻松修改脚本以处理事件。

http://jsfiddle.net/6zp48/2/

http://jsfiddle.net/6zp48/2/

Excerpt from fiddle showing the result of the diff (the findChange() code is too long to paste here):

显示差异结果的小提琴节选（findChange() 代码太长，无法粘贴到此处）：

var changeType = { added: 0, deleted: 1, overwrite: 2 };
var previousValue = '';

window.setInterval(checkChange, 100);

function checkChange() {
    var newValue = $("#input1").val();
    if(newValue != previousValue) {
        showChange(findChange(previousValue, newValue));
        previousValue = newValue;
    }
}

function showChange(result) {
    $("#last-change").html("Prev: " + previousValue + "<br/>Next:" + $("#input1").val() + "<br/>");

    if(result == null)  {
        $("#last-change").html($("#last-change").html() + " no change detected");
        return;
    }

    switch (result.change) {
        case changeType.added:
            $("#last-change").html($("#last-change").html() + "added '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
        case changeType.deleted:
            $("#last-change").html($("#last-change").html() + "deleted '" + result.lost.text + "' at position " + result.lost.position + "<br />");
            break;
        case changeType.overwrite:
            $("#last-change").html($("#last-change").html() + "overwrote '" + result.lost.text + "' with '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
    }
}

回答by Pierre

Short Answer

简答

$('input').on('keydown keyup click input submit mouseenter', function (e) {
    // Handle e.type
    alert('Type: ' + e.type);
});

Append supported or custom events, it should work. I hope this helps someone See Jquery Documentation for more help. http://api.jquery.com/on/

附加受支持的或自定义的事件，它应该可以工作。我希望这对某人有所帮助，请参阅 Jquery 文档以获取更多帮助。http://api.jquery.com/on/