使用 Javascript/jQuery 检查是否正在输入中输入文本

Question

我试图在使用输入时以及输入中有文本时隐藏占位符。这是用于输入和占位符的 HTML 的简化版本：

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

我尝试使用 jQuery，但没有 return 想要的结果：

$(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"> 不为空，或者当通过单击或点击输入（焦点）选择输入时？

Answer 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') 元素提取到变量中，这样代码的可读性会更高一些。

Answer 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 而不是更改 style.display 将 style.opacity 更改为 1(show) 和 0（隐藏）

使用 Javascript/jQuery 检查是否正在输入中输入文本

Check if text is being entered in input using Javascript/jQuery

html

jquery

placeholder

show-hide