javascript - 如何在输入小部件中定位 x 以清除内容？

Question

使用 twitter bootstrap 创建搜索样式输入小部件非常简单：

x 也可以通过 Twitter 引导程序实现，但是将 x 定位在该位置需要一些 CSS 微调。

我设法让 x 处于那个位置，但它不是很可靠。通过响应式设计和不同的分辨率，x 完全被取代。

.filter-close {
    float: none;
    position: relative;
    left: 5em;
    top: 1.25em;
    z-index: 3;
}

<form action="." method="get" class="form-search">
 <a class="close filter-close" href="#">x</a>                                           
    <div class="input-append">                  
        {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>                </div>                          
</form>

在尝试重新发明轮子之前，是否有任何现有的 javascript 库可以在 input-with-an-x-button 中转换输入？类似 Chosen.js 的东西是为了这个目的？或者任何建议我可以如何以更好的方式做到这一点？

非常感谢，

Answer 1

看看这个帖子

这个小提琴基本上可以做你想做的事情。

你正朝着正确的方向前进。

Answer 2

通过对一些引导代码和一些 JavaScript 进行一些更改，您可以完成此操作，实际上您可以在文本框中放置您想要的任何控件。这是一个例子：

这是用于生成它的最终标记：

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

有关完整代码，请查看这篇文章：http ://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

基本上关键是使用relative定位和left:-20px清除元素。

例如：

<input type="text" /><span id="userclear">x</span>

span#userclear
{
  position: relative;
  left: -20px;
}

这样，跨度将与左侧的输入重叠。您可以将事件处理程序附加到它以清除输入字段。