сверхмедленный обмен HTML-файлами

#javascript #html

#javascript #HTML

Вопрос:

этот код работал для меня очень медленно в Chrome и firefox на Mac.

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>TextArea</title>
    </head>
    <body>
        <label for="txtarea">Input</label>
        <input type="text" id="txtarea" size="30" onchange="setText(this.value)"/>
        <p>Content Value</p>
        <label id="lbl_content"></label>
    </body>
    <script>
      let lbl = document.getElementById("lbl_content");
      function setText(value) {
        lbl.innerHTML = value;
      }
</script>
</html>
  

любая причина, по которой это занимает пару секунд?

Комментарии:

1. Возможно, пришло время приобрести новый mac! 😁 ПРОСТО ШУЧУ! Что вы подразумеваете под таким медленным? Для меня это работает нормально.

2. Используйте onkeyup вместо onchange

3. Итак, onchange в поле ввода нуждается в том, чтобы оно отвлекало внимание от поля. Вы увидите, как только вы введете букву и нажмете вне поля, она отобразится мгновенно. Для текстовых полей вам нужны события onkeyup. onchange обычно предназначен для полей выбора. Хороший вопрос. Никогда не замечал этого.

4. Пожалуйста, не могли бы вы уточнить свой вопрос? Вы измерили, сколько времени занимает процесс? Как насчет использования «приватного режима»? Попробуйте отключить дополнения?

5. спасибо за все ваши комментарии, использование onkeyup И onchange сделало свое дело.

Ответ №1:

Он должен работать нормально. Если вы намерены изменять значение в метке всякий раз, когда пользователь нажимает клавишу, вам следует использовать onkeyup вместо onchange. Поскольку onchange запускается всякий раз, когда элемент теряет фокус, в то время как onkeyup запускается всякий раз, когда пользователь нажимает клавишу, НО если пользователь вводит значение с помощью автозаполнения, onkeyup не будет запущен, однако onchange будет запущен. Поэтому я бы рекомендовал вам использовать оба события.