如何在用户清除文本字段时延迟 java 脚本 keyup() 处理程序

Question

我正在为单个文本框使用 JavaScript keyup() 事件。

如果有人输入“Windows”，它会为每个 keyup 发送一个 HTTP 请求：

“W”, “Wi”, “Win”, “Wind”, “Windo”, “Window”, “Windows”

这是期望的行为。

当用户将文本框清空时，报错。

这是不受欢迎的行为。

问题

如何在清除文本框时停止发送 HTTP 请求？

Answer 1

提出请求前检查value

function getResult(elem) {

  if (elem.value !== '') {

    console.log('Have values')
  } else {

    console.log('No values')
  }


}

<input type="text" onkeyup="getResult(this)">

Answer 2

您可以使用 AJAX 向服务器发送信息（并获取相关信息）：

<?php

if (isset($_POST['search'])) {
  echo json_encode($_POST);
  die();
}

?>

<form>
  <input id="search" type="text" name="search" />
</form>

<script>

document.getElementById("search").addEventListener('keyup', function (e) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "#", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        object = JSON.parse(xhr.responseText);
        console.log(object);
      }
    }
  }
  xhr.send("search=" + this.value);
});

</script>

如何在用户清除文本字段时延迟 java 脚本 keyup() 处理程序

How to delay the java script keyup() handler when user clear text field

javascript

php

onkeyup

keyup