Question

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

例如

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

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

因此，当您更改输入字段的值时，它使用外部文件Eg更新了div SomeId。 calculate.php？测试= 5 + 5

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

Answer 1

每次按键后，

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

请注意，最佳做法是使用JavaScript绑定页面加载上的函数，而不是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毫秒）的计时器。那是非常短。

Answer 2

在文本字段的焦点中，调用应该调用对该calculate.php的ajax调用的java脚本函数。从php文件返回响应并更新特别是div Id。

function onfocusoutupdatevalue(){
  $.ajax({
  type: "POST",
  url: "calculate.php",
  data: { value: "5+5" }
  }).done(function( ans ) {
    $("#SomeId").val(ans) 
  });
}

您需要添加jQuery lib文件。

在文本字段中键入时更新div

2 个答案: