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