javascript - 选择时在文本框中使用 javascript 隐藏图像

Question

我想更改文本框中图像的可见性。当我选择文本框“搜索”时，占位符变得不可见。你可以用里面的图片做同样的事情吗？

编码：

<div id="ricerca">
                  <form >
                  <input type="text" class="ricerca" value="Search" onblur="if (this.value == '') this.value ='Search';" onclick="if (this.value == 'Search') this.value ='';"  >
                  <input type="submit"  id="lente" class="lente"  value="show" style="border:none;">
                  </form> 
</div>  

这是链接：http ://www.lookcommunication.it/korus/WEPA/IT/

Answer 1

这对你有用吗>

<style type="text/css">
input.image-placeholder{
    background-image:url("image path");
    background-repeat:no-repeat;
    background-position: center left;
}
</style>

<div id="ricerca">
              <form >
              <input type="text" class="ricerca" value="Search" onblur="if (this.value == '') this.className= this.className + ' image-placeholder';" onclick="if (this.value == 'Search') this.className='ricerca';"  >
              <input type="submit"  id="lente" class="lente"  value="show" style="border:none;">
              </form> 
</div>

Answer 2

为您提供一些 Jquery 功能

$(".ricerca").click(function() {
  $("#lente").hide();
 });
$(".ricerca").focusout(function() {
  $("#lente").show();
  $("#lente").css('marginTop',"-22px");
 });

看看这里JSFIDDLE DEMO