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

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

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

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

当前回答

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

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

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

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

其他回答

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

下面是演示链接

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

如果你想让它像谷歌一样,那么你应该知道“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代码来清除文本框。

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

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

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

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

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