javascript - 在文本字段中输入时更新 div

Question

我想在更改输入字段的值时更新 div。

例如。

<form>
<input type="text" name="test"><!--Eg. 5+5-->
</form>

<div id="SomeId">
<img src=loading.gif>
</div>

因此，当您更改输入字段的值时，它会使用外部文件(例如)更新 div SomeId。计算.php?test=5+5

那么我如何监听输入字段的更新呢？

Answer 1

<input type="text" onkeypress="doSomething(this.value);">每次按键后都会将输入元素的整个值发送到函数。

请注意，最佳实践是使用 JavaScript 在页面加载时绑定(bind)该函数，而不是使用 onkeypress但执行后者给出了一个单行示例。

这是一个doSomething测试函数:

function doSomething(what) {
    console.log(what);
}

编辑添加:如果您不想处理每个击键，请使用 onchange事件: <input type="text" onchange="doSomething(this.value);">

另一个编辑:

var timerHandle = false; // global!
function setTimer(what) {
    console.log("Captured keys: " + what);
    if (timerHandle) clearTimeout(timerHandle);
    timerHandle = setTimeout(sendItOff,1000); // delay is in milliseconds
}
function sendItOff() {
    what = document.getElementById("test").value;
    console.log("Sending " + what);
}

输入元素现在必须有一个 ID: <input type="text" name="test" id="test" onkeypress="setTimer(this.value);">

这使用一秒(1000 毫秒)计时器。这非常很短。