почему fetch вызывает бесконечный цикл

Question

Есть input text с событием keyup которое длжно отправить на сервер введенный символ и очистить поле. Проблема в том что без fetch работает нормально, выводит в консоль символ, а с ним запускается бесконечный цикл непонятно откуда. Цикл останавливается при потере фокуса инпутом

<html>

<head>
  <script>
    window.onload = function() {
      document.querySelector("#sendkey").addEventListener("keyup", () => {
        let v = ""
        if (document.querySelector("#sendkey").value.length > 0) {
          v = document.querySelector("#sendkey").value

          if (v.length > 0) {
            let f = new FormData();
            f.append("kbd", v)
            fetch("http://192.168.1.149:1111", {
              method: "POST",
              body: f
            })

            console.log("1")
          }
          document.querySelector("#sendkey").value = ""

        } else console.log("2")
      })


    }
  </script>
</head>

<body>
  <input type="text" id="sendkey" />
</body>

</html>

Answer 1

Смените событие keyup на input. Вот вам вырезка из сатьи

Клавиатура: keydown и keyup

Прежде чем перейти к клавиатуре, обратите внимание, что на современных устройствах есть и другие способы «ввести что-то». Например, распознавание речи (это особенно актуально на мобильных устройствах) или Копировать/Вставить с помощью мыши.

Поэтому, если мы хотим корректно отслеживать ввод в поле , то одних клавиатурных событий недостаточно. Существует специальное событие input, чтобы отслеживать любые изменения в поле . И оно справляется с такой задачей намного лучше.

Автоповтор

При долгом нажатии клавиши возникает автоповтор: keydown срабатывает снова и снова, и когда клавишу отпускают, то отрабатывает keyup. Так что ситуация, когда много keydown и один keyup, абсолютно нормальна.

Для событий, вызванных автоповтором, у объекта события свойство event.repeat равно true.

UPD.

Если ничего не помогло.

Добавьте в обработчик параметр event и console.log(event); скорее всего у вас что то заело и система посылает события от клавиатуры в input.

БЛОГ НА HUSL

почему fetch вызывает бесконечный цикл

Ответы (1 шт):