Question

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

特别是，我需要知道文本何时被更改：

输入（asdf，退格）
剪切/粘贴
关键组合操作（例如ctrl + bksp或选项+ bksp删除前一个单词）
拖动＆amp;删除文字
编辑菜单操作

最好是改变了什么（是否以及插入，删除或替换了哪些文本）。

需要使用Chrome，Safari，Firefox 3 +，IE9 +。

Answer 1

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

element.oninput = function () {

}

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

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

Answer 2

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

输出如下：

旧值：测试测试
新价值：测试w
更改：在第5位用'w'覆盖'test'

该脚本使用window.setInterval（）来避免跨浏览器问题（请参阅https://stackoverflow.com/a/1949416/727190）。这会导致在用户输入速度非常快时对某些更改进行批处理 - 这可能是件好事，具体取决于您的情况。

但是，您可以轻松修改脚本以解决事件。

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

摘自显示diff结果的小提琴（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;
    }
}

Answer 3

简答

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

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

<input />文本更改事件

3 个答案: