HTML 中 onkeydown 事件的奇怪行为

Question

我正在构建一个网站，它有一个输入文本字段，您可以在其中为您的博客输入 markdown post，我希望该网站显示结果的预览（我正在使用Remarkable 渲染过程的 JS 库）。我目前在我的元素中使用 onkeydown 事件，这样每当按下键盘按钮时，我的 JavaScript 代码就会触发，并修改 div 的内容，即输出 window.

HTML 代码类似于：

<textarea onkeydown="render();" placeholder="type Markdown here to see the output as HTML" id="text"></textarea>
<div id="output"></div>

然后是这背后的 JS（不包括 Remarkable 实例化和配置 - 我将使用 md 作为我的 Remarkable 对象 - 如果我的术语有误，我很抱歉，因为我是新手JS):

function render(){
    var out = document.getElementById("output");
    var in = document.getElementById("text").value
    var html_output = md.render(in); // convert markdown to HTML
    out.value = html_output;
}

这很简单，但是当我运行程序时，markdown 输出似乎落在后面输入，像这样：

===== INPUT - the text box =====
Hello world!

===== OUTPUT - the div =====
Hello world

如您所见，输出滞后于输入。据我所知，这不应该发生 - 或者这是 onkeydown 事件的一些无法解释的行为 - 也许它在插入字符之前触发，导致我不得不实施延迟？

Answer 1

使用input事件。 oninput="render();" 这将捕获键入的文本。

HTML 中 onkeydown 事件的奇怪行为

Strange Behaviour With The onkeydown Event in HTML

html

javascript

element

undefined-behavior