neowaring
@neowaring
Разработчик модулей и дополнений Opencart/ocStore

Как отобразить кнопку если input не пустой?

Есть input для ввода текста и 2 кнопки. первая удаляет текст с него а вторая активирует поиск.
Как сделать что бы при пустом input , кнопка удаления текста (span) не отображалась ?

Вот код
<div id="search" class="input-group>
    <input type="text" id="txtsearchinput" name="search" value="" class="form-control" placeholder="Поиск" style="font-size: 15px;height: 37px;">
    <div class="input-group-append" id="button-addon4">

        <!-- Кнопка -->
        <span id="deltxtinput" type="button" style="z-index: 9;"><i class="fa fa-times-circle"></i></span> 
        <!-- Кнопка -->

        <button type="button" style="z-index: 9;"><i class="fa fa-search"></i></button>
    </div>
</div>
<script>
    document.getElementById("deltxtinput").onclick = function (e) {
        document.getElementById("txtsearchinput").value = "";
    }
</script>
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
.hidden {
  display: none;
}

const
  searchInput = document.querySelector('#txtsearchinput'),
  clearButton = document.querySelector('#deltxtinput');

clearButton.addEventListener('click', function() {
  searchInput.value = '';
  searchInput.dispatchEvent(new Event('input'));
});

searchInput.addEventListener('input', function() {
  clearButton.classList.toggle('hidden', !this.value);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
HistoryART
@HistoryART
Целеустремлённый
<script>
    document.getElementById("deltxtinput").onclick = function (e) {
        const tsi = document.getElementById("txtsearchinput").value;
        if(tsi != '') console.log('Input not null')
        else console.log('Input null')
    }
</script>
Ответ написан
IceRD
@IceRD
Предложу вообще не использовать для такой задачи JS
Можно сделать проще, на сss jsfiddle.net/der65cnm
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы