Keyup 事件处理程序显示性能缓慢答案

【问题标题】：Keyup event handler shows slow performanceKeyup 事件处理程序显示性能缓慢
【发布时间】：2020-02-04 05:51:25
【问题描述】：

我的例子：

$(document).on('keyup', '[contenteditable=true]', function (e) {
        
    let _this = $(this), text = _this.text();

    if (text.length === 1) {
        let span = $('<span>').text(text);
        _this.html(span);
    }

    console.log(_this.html());

});

[contenteditable=true] {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>

我的问题：如果我以正常速度在 div 中键入一些文本（超过 1 个字符），则代码可以正常工作。但是，当我尝试快速输入文本时，没有将<span> 标记附加到 div。

我该如何解决这个问题？

【问题讨论】：

这不是 speed，而是当你走得很快时，你在第一次 keyup 之前有多个 keydowns，这意味着第一个 keyup 看到多个字符分区。如果您使用 keypress，您将获得所需的结果（或 input，正如 Zakaria 指出的那样——input 也会在粘贴时触发，这可能是您想要的，也可能不是您想要的）。

标签： javascript jquery html keyup

【解决方案1】：

您可以使用input 事件，而不是在跟踪用户输入时更有效，请查看以下示例：

$(document).on('input', '[contenteditable=true]', function (e) {
    //Your logic
});

或者keypress 就像 T.J. Crowder comment's 所说：

$(document).on('keypress', '[contenteditable=true]', function (e) {
    //Your logic
});

希望这会有所帮助。

$(document).on('input', '[contenteditable=true]', function (e) {
        
    let _this = $(this), text = _this.text();

    if (text.length === 1) {
        let span = $('<span>').text(text);
        _this.html(span);
    }

    console.log(_this.html());

});

[contenteditable=true] {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>

【讨论】：