清除搜索框,单击其中的小“x”
Clear search box on the click of a little "x" inside of it
我正在为tumblr主题制作搜索表单。我想知道是否有任何简单的JavaScript,CSS或jQuery解决方案,当单击文本框中的一个小"x"图像时,它会清除表单?这方面的一个例子是 apple.com。这是我正在使用的搜索代码:
<form id="search" action="/search">
<p>
<input type="text" name="q" placeholder="Search…" />
</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('');
});
请记住,图像位于输入标记之后的同一行上
相关文章:
- 如何在单击按钮时使用instantsearch.js启动搜索
- 单击时在搜索输入上附加文本
- 如何在第一次单击后禁用搜索按钮,直到结果来自服务器
- 当我单击chrome的输入类型=搜索元素上的X时,是否触发了任何事件
- jQuery在多个表中搜索文本,如果找到文本,则单击按钮
- 单击搜索结果分区时停止聚焦
- 尝试在“单击”或“聚焦”GCSE搜索表单输入时触发jquery事件
- 如何使搜索框中的单词可单击以使用 jquery 删除它们
- 单击输入类型=搜索时重置按钮的任何事件
- 单击搜索按钮后如何显示搜索详细信息
- 如何在单击搜索时复制模式 css3 动画效果
- 使用谷歌地点搜索框.如何通过单击按钮启动搜索
- 脚本不适用于搜索页面并单击链接
- 如何在单击或输入时获取搜索栏中的信息.然后将其粘贴到另一页上的另一个输入中
- 为什么当用户单击搜索按钮时屏幕会弹出
- 单击JQuery搜索筛选器框时,标题将消失
- 如何通过单击图像而不是使用搜索来过滤表格
- 在单击按钮时将选定的单选按钮值添加到搜索关键字
- 如何创建单击标签时向左滑动的搜索栏?
- 仅在 Firefox 中,当我单击任何地方时,我的 Twitter 提前输入搜索输入会清除