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

Posted 2023-02-24

【中文标题】如何在输入小部件中定位 x 以清除内容？

【英文标题】：How to position an x in an input widget to clear the content?

【发布时间】：2012-09-24 21:35:36

【问题描述】：

使用 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 的东西是为了这个目的？ 或者任何建议我可以如何以更好的方式做到这一点？

非常感谢，

【问题讨论】：

您是否尝试过使用像素而不是 EM？这可能会使它的位置更可靠

谢谢你的提示，我会试试这个并告诉你。

【参考方案1】：

查看this post

This fiddle 基本上做你想做的事。

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

【讨论】：

我用revised fiddle 简化了@karthikr CSS。

【参考方案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

【参考方案3】：

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

例如：

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

span#userclear

  position: relative;
  left: -20px;

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