Блог

Главная - Вопросы по программированию - Проверьте, вводится ли текст при вводе с помощью Javascript/jQuery

Проверьте, вводится ли текст при вводе с помощью Javascript/jQuery

#html #jquery #show-hide #placeholder

Вопрос:

Я пытаюсь скрыть заполнитель, пока используется ввод и пока внутри ввода есть текст. Вот упрощенная версия HTML для ввода и заполнителя:

 <div id="search-placeholder"><span class="fa fa-search"></span>amp;nbsp; Search</div>
<input id="search-input" type="text" name="search" />

Я попытался использовать jQuery, но он не возвращает желаемый результат:

 $(document).ready(function(){
  $('#search-input').focus(function(){
    $('#search-placeholder').fadeOut(100);
  }).focusout(function(){
    $('#search-placeholder').fadeIn(100);
  });
});

Заполнитель скроется, когда будет выбран ввод, как и должно быть. Но он снова появится, когда пользователь нажмет в другом месте, даже если ввод не пуст! Заполнитель виден поверх входного значения, поэтому я попробовал другой подход:

 $('#search-input').change(function(){
  if($('#search-input').val() = '') {
    $('#search-placeholder').fadeIn(100);
  }else{
    $('#search-placeholder').fadeOut(100);
  }
})

К сожалению, это работает только тогда, когда пользователь нажимает в другом месте. Заполнитель по-прежнему отображается при вводе и при выборе ввода, снова отображаясь поверх входного значения. Как скрыть, <div id="search-placeholder"> пока <div id="search-input"> он не пуст, или когда ввод выбирается щелчком или касанием по нему (при фокусировке)?

Ответ №1:

Возможно, попробуйте проверить значение ввода в focusout событии и показать заполнитель только в том случае, если он пустой:

 $(document).ready(function(){
  $('#search-input').focus(function(){
    $('#search-placeholder').fadeOut(100);
  }).focusout(function(){
    if($('#search-input').val() === '')
    {
      $('#search-placeholder').fadeIn(100);
    }
  });
});

Я думаю, что вы могли бы извлечь элементы $('#search-input') и $('#search-placeholder') в переменные, чтобы код стал немного более читаемым.

Ответ №2:

Вы делаете это с помощью javascript и jquery

jquery :-

 
    $(document).ready(function(){

      $('#search-input').focus(function() {
      
          $('#search-placeholder').fadeOut(100);

      });
      $('#search-input').focusout(function() {

        if($('#search-input').val() === '') {

          $('#search-placeholder').fadeIn(100);

        }
      });
    });

язык JavaScript

 
    var searchInput = document.getElementById("search-input");
    var searchPlaceholder = document.getElementById("search-placeholder");

    searchInput.onfocus = function() {

      searchPlaceholder.style.display = "none";

    }
    searchInput.onfocusout = function() {

      if(this.value == "") {

        searchPlaceholder.style.display = "block";
      
      }

    }

если вы хотите добавить переходы с постепенным исчезновением в методе javascript, используйте свойство перехода css-переход: непрозрачность 1s и вместо изменения стиля.отображение измените стиль.непрозрачность на 1(показать) и 0(скрыть)

Метки: ,