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

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

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

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

当前回答

在设计模式下将文本框类型更改为'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/

编辑:我找到了这个链接。希望能有所帮助。http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

您提到过希望它位于输入文本的右侧。所以,最好的方法是在输入框旁边创建一个图像。如果要查看方框内的内容,可以使用背景图像,但可能无法编写脚本来清除方框。

因此,插入和图像并编写JavaScript代码来清除文本框。

我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码使其工作

下面是演示链接

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

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

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