清除搜索框，单击其中的小“x”

Clear search box on the click of a little "x" inside of it

本文关键字：搜索 单击 清除      更新时间：2023-09-26

我正在为tumblr主题制作搜索表单。我想知道是否有任何简单的JavaScript，CSS或jQuery解决方案，当单击文本框中的一个小"x"图像时，它会清除表单？这方面的一个例子是 apple.com。这是我正在使用的搜索代码：

<form id="search" action="/search">
    <p>
        <input type="text" name="q"  placeholder="Search&hellip;" />
    </p>
</form>

它实际上不在里面...

试试这个：

<span class="search"><img src=lookup><input type=text ><span>x</span></span>

风格如下：

span.search 
  {
    display:inline-block;
    border:1px solid black;
    border-radius:0.5em; 
    -webkit-border-radius: 0.5em;    
  }
span.search > input 
  {
    background: none;
    border: none;
  }

为了扩展 kingjv 的解决方案，这是一个简单的插件：
http://jsfiddle.net/PvFSF/

(function ($, undefined) {  
    $.fn.clearable = function () {  
        var $this = this;  
        $this.wrap('<div class="clear-holder" />');  
        var helper = $('<span class="clear-helper">x</span>');  
        $this.parent().append(helper);  
        helper.click(function(){  
            $this.val("");  
        });  
    };  
})(jQuery);

$（"#myInput"）.clearable（）;

这只是

一个 css 技巧。如果您看到 apple.com，他们正在做的是将删除图像放在文本之后，但它似乎在里面。这里有实现此效果的代码：

<style>
  #searchContainer{
    border-width: 1px;
    border-style: solid;
    display: inline;
  }
  #q{
     border: none;
  }
</style>
<script>
  $(document).ready(function(){
     $("#clear").click(function(){
        $("#q").val(""); //Clear the text input
     });
  });
</script>
<form id="search" action="/search">
    <p>         
        <div id="searchContainer">
          <input type="text" name="q" id="q" />
          <span id="clear">x</span> <!-- You can use an image here instead -->
        </div>
    </p>
</form>

它经过测试和运行:)
希望这有帮助。干杯

如果你看一下苹果网站的源代码，你会发现他们的搜索文本框实际上是一个div，一个文本框，然后是另一个div。正是这些外部div 持有像 x 这样的东西来清除它。

你可以做这样的事情：

http://jsfiddle.net/nByBB/

当然可能想让它变得更好一点，但它说明了这个想法。

使用CSS给你的输入字段右填充，比如说20px。然后制作一个 （X） 的图像 [假设您的图像宽度为 20px，称为 clear.png]，在您的标签后面包含<img class="clearingImage" src="/imagepath/clear.png" style="position:relative;left:-20px;" />，然后在您的 javascript 块中您说

$('img.clearingImage').click(function () {
   $(this).prev().val('');
});

请记住，图像位于输入标记之后的同一行上

相关文章：