我试图在输入被使用和输入中有文本时隐藏占位符。下面是输入和占位符的HTML的简化版本:

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

我尝试使用jQuery，但它没有返回所需的结果:

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

当输入被选中时，占位符将隐藏，这是应该的。但是当用户点击其他地方时，它会再次显示，即使输入不是空的！占位符在输入值的顶部是可见的，所以我尝试了一种不同的方法:

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

不幸的是，这只在用户单击其他地方时起作用。在键入和选择输入时，占位符仍然显示，再次显示在输入值的顶部。如何在不为空时隐藏，或者通过单击或轻击输入（在焦点上）选择输入时隐藏