Добавление прослушивателя событий в поле ввода и проверка, пусто ли оно

Я пытаюсь добавить прослушиватель событий в поле ввода, чтобы проверить, пусто ли оно. Если он пуст, спрячьте autoComplete-Box-id. Но когда я загружаю страницу, а поле ввода пусто, он показывает элемент. Как это исправить?

HTML:

        <span>
          <input id = "originInput" style = "width: 350px;" name = "origin" type = "text" placeholder = "Origin">
        </span>
        <div id = "autoComplete-Box-id"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <span>
          <input style = "width: 350px;" name = "destination" type = "text" placeholder = "Destination">
        </span>
      </form>`

ЯС:

    let getOriginInput = document.getElementById("originInput");

    getOriginInput.addEventListener("input", function(e) {
      
      console.info(e.target.value.length);
  
      if (e.target.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display = "none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display = "";
      }
    });

CSS:

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}

Я попробовал проверить e.target.value.length и посмотреть, равна ли длина = 0. Если бы это было так, я бы смог заставить элемент исчезнуть при загрузке и снова появиться, когда в поле был введен ввод.

Просто для пояснения: элемент отображается при загрузке страницы, хотя входные данные пусты, потому что вы подключили функцию к событию input, но так и не выполнили ее. Таким образом, он сработает только после того, как вы действительно что-то наберете в поле. Чтобы решить эту проблему, вам следует после загрузки страницы добавить что-то вроде document.getElementById("autoComplete-Box-id").style.display = (document.getElementById("originInput").value == "") ? "none" : "".

Congregator 18.05.2024 04:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
69
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте использовать событие «keypress».

Обновлено: Кроме того, убедитесь, что ваш js-код размещен после ввода в ваш html. Или, если вы используете скрипт, вы можете использовать атрибут defer, чтобы скрипт загружался после загрузки страницы.

<script src='myscript.js' defer></script>
Ответ принят как подходящий

Все, что вам нужно сделать, это переместить ваш код в функцию, я называю ее setDisplay(), вы можете называть ее как угодно. Заменять

e.target.value

с

getOriginInput.value

Затем вызовите эту функцию в начале вашего js-файла, а также внутри обработчика событий.

Вы можете запустить этот фрагмент кода, чтобы увидеть, как он работает.

    let getOriginInput = document.getElementById("originInput");
    
    setDisplay( )

    getOriginInput.addEventListener("input", function(e) {
      setDisplay( )
    });

    function setDisplay( ) {
      if (getOriginInput.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display = "none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display = "";
      }
    }
#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}
        <form>
          <span>
            <input id = "originInput" style = "width: 350px;" name = "origin" type = "text" placeholder = "Origin">
          </span>
        <div id = "autoComplete-Box-id"></div>
        <br><br><br><br><br>
        <span>
          <input style = "width: 350px;" name = "destination" type = "text" placeholder = "Destination">
        </span>
      </form>

Другие вопросы по теме