contenteditable div: 捕获输入事件，忽略粘贴事件

Question

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

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

Answer 1

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

如果您不want/can不使用键盘检测，则有后门。看起来 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 和 typing in。如果你不想在 oninput 处理程序中处理这些事件中的任何一个，你已经监听所有这些事件，并相应地设置一个标志。

作为旁注，IE 不会在 contenteditables 上触发 oninput。如果要支持IE，需要使用onkeypdown/up-onpaste-oncut-ondrop组合来实现类似oninput.[=24=的效果]

contenteditable div: 捕获输入事件，忽略粘贴事件

contenteditable div: capture input event, ignore paste event

html

javascript

events

contenteditable