Question

我希望我立即在文本字段中输入的文字显示在div中：

＆＃13;

function func() {
  document.getElementById("query").innerHTML = document.getElementById("keyword").value;
}
window.onload = function() {
  keyword.onkeydown = function(e) {
    func();
  }
}

＆＃13;

<input type="text" id="keyword" size="40">
<div id="query"></div>

＆＃13;

它有效，唯一的问题是，它会延迟显示。

因此，如果我输入＆＃34; abc＆＃34;，它只会显示＆＃34; ab＆＃34;。我需要输入另一个角色，例如＆＃34; abcd＆＃34;，以便它显示＆＃34; abc＆＃34;。
最后一个角色总是丢失。

您可以尝试一下：http://jsfiddle.net/285cz0np/

Answer 1

该事件被解雇onkeydown。由于输入元素的值尚未改变，因此您无法看到结果。

您可以将其更改为onkeyup，而不是：(updated example)。或者您可以在调用函数之前设置延迟。

或者，您也可以收听input event：

Example Here

document.getElementById("keyword").addEventListener('input', function (e) {
    document.getElementById("query").textContent = e.target.value;
});

Answer 2

问题是因为输入文本值，在释放密钥之前不会更改。使用setTimeout，您可以让浏览器更新值，然后运行您的函数（func）

我建议您不要更改onkeyup，因为您需要onkeydown，此解决方案仍可使用onkeydown事件

keyword.onkeydown = function (e) {
        setTimeout(func,0)
    }

更新示例jsFiddle：http://jsfiddle.net/285cz0np/1/

我建议您更改为input事件。例如，如果用户从剪贴板粘贴（仅使用鼠标），则不会触发您的事件。

Answer 3

这是因为触发该函数的事件是onkeydown，因此当按下该键时，该函数会读取文本区域的值。此时它读取数据，按下的键尚未添加到实际值中。

一个简单的解决方法是将事件更改为onkeyup，因为当密钥处于up状态时，该密钥的值将被添加到值中。

window.onload = function () {
    keyword.onkeyup = function (e) {
        func();
    }
}

文本显示延迟

3 个答案: