时间戳

首页 > 解决方案 > 检查是否正在使用 Javascript/jQuery 在输入中输入文本

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

问题描述

我试图在使用输入时隐藏占位符并且输入中有文本。这是用于输入和占位符的 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">不为空时隐藏，或者通过单击或点击（焦点）选择输入时如何隐藏？

标签： htmljqueryshow-hideplaceholder

解决方案

也许尝试检查focusout事件中输入的值，如果占位符为空，则仅显示占位符：

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

$('#search-input')我认为您可以将and元素提取$('#search-placeholder')到变量中，因此代码变得更具可读性。

推荐阅读