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

【问题标题】：Check if text is being entered in input using Javascript/jQuery检查是否正在使用 Javascript/jQuery 在输入中输入文本
【发布时间】：2021-11-24 04:02:02
【问题描述】：

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

<div id="search-placeholder"><span class="fa fa-search"></span>&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"> 不为空，或者通过单击或点击（焦点）选择输入时？

【问题讨论】：

标签： html jquery show-hide placeholder

【解决方案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 过渡属性 - transition: opacity 1s 而不是更改 style.display 更改 style.opacity 到 1（显示） 和 0（隐藏）

【讨论】：