keyup 和 keydown 不同步？ [关闭]答案

【问题标题】：keyup and keydown are not synchronized? [closed]keyup 和 keydown 不同步？ [关闭]
【发布时间】：2021-07-20 06:13:34
【问题描述】：

我正在尝试构建一个复杂的 WYSIWYG，为此我想在按下某些键后创建一些操作。

为此，我在带有contenteditable 的div 上添加jquery keypress 和keyup 侦听器。我的一项操作对 HTML 进行了一些更改，更改后我的光标位置应该保持不变。

我的问题是，当我处理 keyup 事件时，keyup 和 keydown 之间没有关系。

keyup 事件不应在时间关系中触发。

如果你开始写下面的例子，你可以看到keydown和keyup之间没有顺序。

如果在 B 键之后按下了键 A，则 A 的 ´keyup` 应该在 的事件之后触发B。

var result = document.getElementById('div-result');
function log(msg) {
  result.innerHTML = result.innerHTML + '<br>' + msg;
}
$('#div-editable').keydown(function(e) {
  log('down:&nbsp;' + e.keyCode);
});
$('#div-editable').keyup(function(e) {
  log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode);
});
log('Iniciando log...');

div#div-editable {
  background: #F2F2F2;
  padding: 10px;
  border: solid 1px #333333;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div-editable" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div id="div-result"></div>

没有办法同步这些方法。换句话说，当我在处理keyup，keydown 应该等待。

【问题讨论】：

我不明白问题出在哪里。
您尝试使用上下键解决什么问题？
我必须把所有写的文字都分解成文字。像word1 word2 word3 这样的东西应该变成<word>word1</word> <word>word2</word> <word>word3</word>。
似乎对我有用。 Keydown 和 keyup 以正确的顺序发生。

标签： javascript event-handling synchronization jquery-events jquery-1.8

【解决方案1】：

keyup 和 keydown 就是字面意思。我可以按住a，按b然后放开a。

这会给你：keydown：a，keydown：b：，keyup：b，keyup：a。

您必须能够处理这些“无序”的事件。

【讨论】：

好的。我该如何处理？这就是问题！没有办法创建任何同步？
你的意思是跟踪光标位置？您真的需要知道onkeyup/down 事件触发时光标的位置吗？您始终可以使用 Selection/Range API 获取光标位置。 developer.mozilla.org/en/docs/Web/API/Range
我相信你没有猜错我的问题。我知道得到范围和选择。我想知道有没有办法同步这些事件！
这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@Victor 我认为这很难做到。当您按右箭头一会儿时，您如何知道光标将在哪里结束？我认为你能做的就是同步keyup上的光标位置。

【解决方案2】：

也许您想保留一些关于当前正在按下哪些键的状态信息，以便您可以忽略任何重复的事件，直到它被按下。例如，

var result = document.getElementById('div-result');
var pressed_keys = {};

function log(msg) {
    result.innerHTML = result.innerHTML + '<br>' + msg;
}

$('#div-editable').keydown(function(e) {
    if (pressed_keys[e.keyCode]) {
        // Currently pressed, ignore.
        return;
    }

    // Mark key as pressed.
    pressed_keys[e.keyCode] = true;

    log('down:&nbsp;' + e.keyCode);
});

$('#div-editable').keyup(function(e) {
    log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode);

    // Mark key has depressed.
    pressed_keys[e.keyCode] = false;
});

log('Iniciando log...');

【讨论】：