有没有一种快速的方法来创建一个输入文本元素,在右边有一个图标,以清除输入元素本身(如谷歌搜索框)?

我环顾四周,但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?

我想在输入文本元素内的图标,类似于:

--------------------------------------------------
|                                               X|
--------------------------------------------------

当前回答

我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button

其他回答

下面是一个jQuery插件(最后还有一个演示)。

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

我这样做主要是为了说明一个例子(也是一个个人挑战)。虽然点赞很受欢迎,但其他答案都很准时,值得他们应有的认可。

然而,在我看来,这是过度设计的膨胀(除非它成为UI库的一部分)。

使用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>

获得像这样的东西:

像这样的事情?? 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>

你可以使用一个带有图像样式的重置按钮…

<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( http://png-5.findicons.com/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

我的建议是,如果你不介意仅限于html 5兼容的浏览器,只需使用:

<input type="search" />

JS小提琴演示

不可否认,在Chromium (Ubuntu 11.04)中,这确实要求在明文图像/功能出现之前在输入元素中有文本。

参考:

深入HTML 5:一种疯狂的形式。 输入类型=搜索-搜索字段(新)HTML5。