Javascript <；输入>；文本更改事件

是否有一个库可以从

（或contentEditable——任何一行输入字段）元素中提取所有文本事件

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

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

最好是改变了什么（是否插入、删除或替换了什么文本）

---

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

所有浏览器都支持HTML5

oninput

事件，其工作原理非常类似于

onchange

事件，但只要元素的输入发生变化，就会触发该事件。它也会冒泡，因此您可以在文档树的更上层捕获它

element.oninput = function () {

}

工作演示：

---

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

输出如下：

旧值：测试测试
新值：测试w
更改：在位置5处用“w”重写“测试”

该脚本使用window.setInterval（）来避免跨浏览器问题（请参阅）。这会导致在用户输入速度非常快时批处理一些更改-这可能是一件好事，取决于您的情况

但是，您可以轻松地修改脚本以消除事件

摘自显示差异结果的fiddle（findChange（）代码太长，无法粘贴到此处）：

var changeType={添加：0，删除：1，覆盖：2}；
var previousValue=“”；
window.setInterval（checkChange，100）；
函数checkChange（）{
var newValue=$（“#input1”）.val（）；
if（newValue！=上一个值）{
showChange（findChange（previousValue，newValue））；
前一个值=新值；
}
}
函数showChange（结果）{
$（“#最后一次更改”）.html（“上一次：+previousValue+”
下一次：++$（“#输入1”）.val（）+”
）；
如果（结果==null）{
$（“#上次更改”）.html（$（“#上次更改”）.html（）+“未检测到更改”）；
返回；
}
开关（结果更改）{
已添加案例更改类型：
$（“#上次更改”）.html（$（“#上次更改”）.html（）+“添加了”+“结果添加了”+“文本”+“位置”+result.added.position+”
）；
打破
案例更改类型。已删除：
$（“#上次更改”）.html（$（“#上次更改”）.html（）+“已删除”+result.lost.text+“'at position”+result.lost.position+”
）；
打破
case changeType.overwrite：
$（“#最后一次更改”）.html（$（“#最后一次更改”）.html（）+“重写”+result.lost.text+“'with'”+result.added.text+“'at position”+result.added.position+“
”）；
打破
}
}

简短回答

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

附加支持的或自定义的事件，它应该可以工作。我希望这对某人有帮助

---

有关更多帮助，请参阅Jquery文档

当我在清单上看到这个问题时，我就知道我会发现什么，果然，你的答案是：）@Tim:Ha！我觉得我开始听起来像是一张破唱片：-）至少这个问题的答案不是“使用onkeyup！”…@nornagon:这不是一个简单直接的方式。该事件不会在属性中公开任何类似的内容，因此您必须将以前的值存储在一个变量中，并在每次文本更改时更新该变量，比较两个值。我不想编写一个diff算法来计算发生了什么：（我用它来连接一个类似波浪的操作转换库，所以delta很重要。使用contentEditable元素会更容易吗？@nornagnon，@Andy:另外，

输入事件在contentEditable上还不普遍支持，所以情况更糟。ShareJS在a
中有一个。基本上：它看起来是f或者第一个字符被改变了，最后一个字符被改变了，假设中间的每一个都被替换了。很好的发现！这对像用户选择和拖动文本在TeXTaRa中，或者粘贴，YEP来说应该是有用的。它不会总是找到最小的可能的delta，甚至是非常智能的DEL。ta，但它总是正确的。你能实现你想要的吗？你最终使用了什么？我使用了公认答案中描述的
oninput
事件。无法找到更改的文本，但你可以看到sharejs是如何做到的：
$('input').on('keydown keyup click input submit mouseenter', function (e) {
    // Handle e.type
    alert('Type: ' + e.type);
});