有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标，以清除输入元素本身(如谷歌搜索框)?
我环顾四周，但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?
我想在输入文本元素内的图标，类似于:
--------------------------------------------------
| X|
--------------------------------------------------
当前回答
我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button
其他回答
在设计模式下将文本框类型更改为'search'或
<input type="search">
如果你想让它像谷歌一样，那么你应该知道“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/
我的建议是，如果你不介意仅限于html 5兼容的浏览器，只需使用:
<input type="search" />
JS小提琴演示
不可否认，在Chromium (Ubuntu 11.04)中，这确实要求在明文图像/功能出现之前在输入元素中有文本。
参考:
深入HTML 5:一种疯狂的形式。 输入类型=搜索-搜索字段(新)HTML5。
使用jquery插件，我已经适应了我的需要，添加自定义选项和创建一个新的插件。你可以在这里找到它: https://github.com/david-dlc-cerezo/jquery-clearField
下面是一个简单用法的例子:
<script src='http://code.jquery.com/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移动API TextInput文档
