有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标，以清除输入元素本身(如谷歌搜索框)?
我环顾四周，但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?
我想在输入文本元素内的图标，类似于:
--------------------------------------------------
| X|
--------------------------------------------------
当前回答
像这样的事情?? 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">✗</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>
其他回答
我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码使其工作
下面是演示链接
http://codepen.io/shidhincr/pen/ICLBD
我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button
不需要包含CSS或图像文件。不需要包含整个沉重的jQuery UI库。我写了一个轻量级的jQuery插件，为你做的魔法。你所需要的只是jQuery和插件。=）
jQuery InputSearch演示。
使用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插件(最后还有一个演示)。
http://jsfiddle.net/e4qhW/3/
我这样做主要是为了说明一个例子(也是一个个人挑战)。虽然点赞很受欢迎，但其他答案都很准时，值得他们应有的认可。
然而，在我看来，这是过度设计的膨胀(除非它成为UI库的一部分)。
