清除input文本中的图标
我想知道是否有一个快速的方法来创build一个input文本元素与右侧的图标清除input元素本身（如谷歌search框）。
我环顾四周，但我只发现如何把一个图标作为input元素的背景。
有没有一个jQuery插件或其他东西？
谢谢
编辑：我想要input文本元素内的图标
就像是：
-------------------------------------------------- | X| -------------------------------------------------- 添加一个type="search"到您的input
支持是相当不错的，但不会在IE浏览器<10
<input type="search">
我可以build议，如果你没有问题，只能使用HTML 5兼容的浏览器：
<input type="search" />
JS小提琴演示
无可否认，在Chromium（Ubuntu 11.04）中，这确实需要在input元素内部有文本， 才能显示明文图像/function。
参考：
- 深入HTML 5：一种疯狂的forms 。
- inputtypes=search – search字段（NEW）HTML5 。
您可以使用与图像样式的重置button…
<form action="" method="get"> <input type="text" name="search" required="required" placeholder="type here" /> <input type="reset" value="" alt="clear" /> </form> <style> input[type="text"] { height: 38px; font-size: 15pt; } input[type="text"]:invalid + input[type="reset"]{ display: none; } input[type="reset"] { background-image: url( files/icons/1150/tango/32/edit_clear.png ); background-position: center center; background-repeat: no-repeat; height: 38px; width: 38px; border: none; background-color: transparent; cursor: pointer; position: relative; top: -9px; left: -44px; } </style>
根据MDN的说法，目前所有的浏览器都支持<input type="search" />
<input type="search" value="Clear this." />
由于没有任何解决scheme能够真正满足我们的要求，所以我们想出了一个简单的jQuery插件jQuery-ClearSearch –
使用它就像：
<input class="clearable" type="text" placeholder="search"> <script type="text/javascript"> $('.clearable').clearSearch(); </script>
例如： http : //jsfiddle.net/wldaunfr/FERw3/
编辑：我发现这个链接。 希望它有帮助。 http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
你已经提到你想要它在input文本的右侧。 所以，最好的方法是在input框旁边创build一个图像。 如果你在盒子里面看东西，你可以使用背景图片，但是你可能不能写一个脚本来清除盒子。
因此，插入图像并写入JavaScript代码以清除文本框。
如果你喜欢Google，那么你应该知道“X”实际上不在<input>里面 – 它们彼此相邻，外部容器的样式显示为文本框。
HTML：
<form> <span class="x-input"> <input type="text" class="x-input-text" /> <input type="reset" /> </span> </form>
CSS：
.x-input { border: 1px solid #ccc; } .x-input input.x-input-text { border: 0; outline: 0; }
例如： http : //jsfiddle.net/VTvNX/
像这样的东西？
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .searchinput{ display:inline-block;vertical-align: bottom; width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc; outline: none; } .clearspace{width: 20px;display: inline-block;margin-left:-25px; } .clear { width: 20px; transition: max-width 0.3s;overflow: hidden;float: right; display: block;max-width: 0px; } .show { cursor: pointer;width: 20px;max-width:20px; } form{white-space: nowrap;} </style> </head> <body> <form> <input type="text" class="searchinput"> </form> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">✗</i></span>'); $("input.searchinput").on('keyup input',function(){ if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");} }); $('.clear').click(function(){ $('input.searchinput').val('').focus(); $(".clear").removeClass("show"); }); }); </script> </body> </html>
这里有一个jQuery插件（和最后的演示）。
我主要是为了说明一个例子（和个人的挑战）。 虽然欢迎，其他答案是准时交付，值得应有的认可。
不过，在我看来，这是过度devise的膨胀（除非它是UI库的一部分）。
我用jQuery和bootstrap编写了一个简单的组件。 试试看： https ： //github.com/mahpour/bootstrap-input-clear-button
使用jquery插件我已经适应了我的需要添加自定义的选项，并创build一个新的插件。 你可以在这里find它： https : //github.com/david-dlc-cerezo/jquery-clearField
一个简单的用法的例子：
<script src='jquery-1.9.1.js'></script> <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script> <script src='src/jquery.clearField.js'></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/jquery.clearField.css"> <table> <tr> <td><input name="test1" id="test1" clas="test" type='text'></td> <td>Empty</td> </tr> <tr> <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td> <td>Not empty</td> </tr> </table> <script> $('.test').clearField(); </script>
获得这样的东西：
jQuery Mobile现在有这个内置的：
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery Mobile API TextInput文档
不需要包含CSS或图像文件。 不需要包含整个重炮jQuery UI库。 我写了一个轻量级的jQuery插件，为你做了这个魔术。 所有你需要的是jQuery和插件 。 =）
小提琴在这里： jQuery的InputSearch演示 。
