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不会针对有争议的人发起oninput。如果您想支持IE，则需要使用onkeypdown/up - onpaste - oncut - ondrop组合来实现与oninput类似的功能。

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

1 个答案: