HTML 中 onkeydown 事件的奇怪行为答案

【问题标题】：Strange Behaviour With The onkeydown Event in HTMLHTML 中 onkeydown 事件的奇怪行为
【发布时间】：2020-11-14 23:32:25
【问题描述】：

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

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 事件的一些无法解释的行为 - 也许它在插入字符之前触发，导致我不得不实施延迟？

【问题讨论】：

onkeydown 在添加输入之前触发。您可以使用 event.keyCode 之类的方式按下按键。或者，您可以添加延迟或使用 onkeyup。

标签： javascript html element undefined-behavior

【解决方案1】：

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

【讨论】：