javascript - contenteditable div : capture input event, 忽略粘贴事件

Question

我正在尝试构建一个快捷方式扩展器，因此当用户键入特定的字符序列时，它会被替换为一些较长的句子。

我目前正在使用“输入”事件来捕获内容可编辑的更改。问题是，粘贴也会触发“输入”事件。我只希望当用户输入字符时触发该事件。有什么办法可以做到这一点吗？

Answer 1

最简单的解决方案是检测键盘事件(keydown、keyup 或 keypress)而不是 oninput，但选择哪个事件取决于处理程序实际要执行的操作。

如果您不想/不能使用键盘检测，可以使用后门。看起来 onpaste 会在 oninput 之前触发(Chrome、FF)。因此，您可以创建一个用于粘贴的标志，并在 oninput 处理程序中检查它。像这样的事情:

var pasted = false,
    pad = document.getElementById('pad'); // The contenteditable
pad.addEventListener('paste', function (e) {
    pasted = true;
});
pad.addEventListener('input', function (e) {
    if (pasted) {
        pasted = false;
        return;
    }
    console.log('keyboard, cut or drop');
});

A live demo at jsFiddle .

请注意，oninput 也会在 ondrop 和 oncut 以及 onpaste 和输入中触发。如果您不想在 oninput 处理程序中处理任何这些事件，您必须监听所有这些事件，并相应地设置一个标志。

顺便说一句，IE 不会在 contenteditables 上触发 oninput。如果要支持IE，需要使用onkeypdown/up-onpaste-oncut-ondrop组合来实现类似于oninput的东西。