Задать вопрос
neowaring
@neowaring
Разработчик неизвестных систем
javascript

Как отобразить кнопку если 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>
  • Вопрос задан
  • 469 просмотров
1 комментарий
Подписаться 2 Простой 1 комментарий
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript 
.hidden {
  display: none;
}

const searchInput = document.querySelector('#txtsearchinput');
const 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);
});
Ответ написан
3 комментария
3 комментария
IceRD
@IceRD
Предложу вообще не использовать для такой задачи JS
Можно сделать проще, на сss jsfiddle.net/der65cnm
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@historydev Куратор тега JavaScript
Острая аллергия на анимешников 
<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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы