HTML中onkeydown事件的奇怪行为

Question

我正在构建一个网站，该网站有一个输入文本字段，您可以在其中为博客文章键入markdown，我希望网站显示结果的预览(我使用RemarkableJS库进行渲染过程(。我目前正在元素中使用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作为我的显著对象-如果我的术语是错误的，我很抱歉，因为我是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();"这将捕获键入的文本。