Question

我的例子：

$(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>

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

我该如何解决？

Answer 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
});

希望这有帮助。

＆＃13;

$(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());

});

＆＃13;

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

＆＃13;

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

＆＃13;

keyup事件工作效率很低

1 个答案: