javascript 单击里面的一个小“x”清除搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5917776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear search box on the click of a little "x" inside of it
提问by James Charless Dickinson
I'm working on a search form for a tumblr theme. I'm wondering if there's any simple JavaScript, CSS, or jQuery solution that when a little tiny "x" image insidethe textbox is clicked, it clears the form? An example of this is on apple.com. Here's the search code I'm working with:
我正在研究 tumblr 主题的搜索表单。我不知道是否有任何简单的JavaScript，CSS或jQuery的解决方案，一点微小的“X”时，里面点击文本框，它清除的形式？apple.com 上有一个这样的例子。这是我正在使用的搜索代码：
<form id="search" action="/search">
<p>
<input type="text" name="q" placeholder="Search…" />
</p>
</form>
回答by c-smile
It is not INSIDE actually...
它实际上不是 INSIDE...
Try this:
试试这个：
<span class="search"><img src=lookup><input type=text ><span>x</span></span>
with the style:
风格：
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;
}
回答by kroehre
To expand on kingjv's solution, this is a simple plugin:
http://jsfiddle.net/PvFSF/
为了扩展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();
$("#myInput").clearable();
回答by Edgar Villegas Alvarado
It's only a css trick. If you see apple.com, what they're doing is to put the delete image after the text, but it seems to be inside. Here you have the code to accomplish this effect:
这只是一个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>
It's tested & running :)
Hope this helps. Cheers
它已经过测试和运行 :)
希望这会有所帮助。干杯
回答by Matt Greer
If you look at the source of Apple's site you'll see their search textbox is really a div, a textbox, then another div. It's these outer divs that hold the things like the x to clear it out.
如果您查看 Apple 网站的源代码，您会看到他们的搜索文本框实际上是一个 div、一个文本框，然后是另一个 div。正是这些外部 div 持有像 x 这样的东西来清除它。
回答by James Montagne
You can do something like this:
你可以这样做：
probably want to make it a bit nicer of course but it illustrates the idea.
当然可能想让它更好一点，但它说明了这个想法。
回答by hndcrftd
using css give your input field right padding of, let's say 20px. Then make an image of (X) [and let's say your image has width of 20px and is called clear.png], include <img class="clearingImage" src="/imagepath/clear.png" style="position:relative;left:-20px;" />right after your tag and then in your javascript block you say
使用 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('');
});
keeping in mind that the image is positioned on the same line right after the input tag
请记住，图像位于输入标签之后的同一行上
