清除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> 

请参阅http://jsbin.com/uloli3/63

我在CSS中创build了一个可清除的文本框。 它不需要JavaScript代码来使其工作

下面是演示链接

http://codepen.io/shidhincr/pen/ICLBD

根据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/

像这样的东西?
Jsfiddle演示

  <!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">&cross;</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插件(和最后的演示)。

http://jsfiddle.net/e4qhW/3/

我主要是为了说明一个例子(和个人的挑战)。 虽然欢迎,其他答案是准时交付,值得应有的认可。

不过,在我看来,这是过度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偷看

小提琴在这里: jQuery的InputSearch演示