Появление блока, если поле input не пусто

172

30 июня 2018, 22:00

Линк на сайт

Разрешение 767 и ниже. В хедере появляется поиск с крестиком для очистки: Скрин

Крестик изначально отключаю (diaplay:none) И хочу его включить, когда в поле input поиска начинаю что-то писать.

<div class="mobile_search_header_menu">
   <input id="textInput" type="text" value="">   
   <button id="clearButton">х</button> 
</div>
var clearButton = document.getElementById("clearButton"),
    textInput = document.getElementById("textInput");
clearButton.onclick = function(e){ 
textInput.value = "";
}
(очистка по кнопке работает если ее включить)
(появление самой кнопки "х" не срабатывает)
if (textInput.value != ""){ 
   clearButton.style.display = "block";
}

Ошибок в консоли нет, но и появление блока не срабатывает.

Answer 1

Вот так на js будет?:

  if (textInput.val == "") {
      clearButton.style.display = "none"; 
        else 
       {
        clearButton.style.display = "block"
  }
}

Answer 2

Привяжите проверку наличия текста в поле к событию клавиш

Пример на jQuery

$(function() { 
  $("#text").keydown(CheckInput).keyup(CheckInput); 
}); 
 
function CheckInput() { 
  if ($("#text").val() == "") { 
    $("#close").css({ 
      "display": "none" 
    }); 
  } else { 
    $("#close").css({ 
      "display": "block" 
    }); 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="text" type="text"> 
<div id="close" style="display:none">[CLOSE]</div>

UPD: Пример на JavaScript

function CheckInput(e) { 
  if (e.value == "") { 
    document.getElementById("clearButton").style.display = "none"; 
  } else { 
    document.getElementById("clearButton").style.display = "block"; 
  } 
}

<input id="text" type="text" onkeydown="CheckInput(this)" onkeyup="CheckInput(this)"> 
<div id="clearButton" style="display:none">[CLOSE]</div>

Answer 3

Это пока для меня еще слишком сложно будет. А если простой вариант. При клике в input нужный блок отображается, как только ушли из него он снова пропадает. Или это с focus нужно использовать?

Answer 4

Вопрос решен данным образом: линк на генератор

$("input").keyup(function () {
       if ($(this).val()) {
          $("button").show();
       }
       else {
          $("button").hide();
       }
    });
    $("button").click(function () {
       $("input").val('');
       $(this).hide();
    });

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выводить рандомные числа в графике

Как выводить рандомные числа в графике каждые 5 секунд ?

201

javascript

Стилизация google chatrs

Есть ли возможность стилизовать point's в google chart именно по наведению? И есть ли возможность увеличить один отдельный point даже без наведенияИ...

174

javascript