Twitter bootstrap 如何清除带有'；x'；在引导3中？

在引导方面遇到了一些问题，所以一些帮助将是非常棒的。谢谢

我想要的：（上半部分）

我当前的代码：

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

当前屏幕截图：

将图像（取消图标）放置在绝对位置，调整顶部和左侧属性，并调用方法onclick事件以清除输入字段

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

---

得到这样的东西

对于Bootstrap 3和Jquery，请使用以下HTML代码：

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

和Javascript：

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

当然，您必须为所需的任何功能编写更多Javascript，例如，如果输入为空，则隐藏“x”，发出Ajax请求等等。请参见

谢谢，您的解决方案非常干净。我使用了水平引导表单，并做了一些修改，以允许使用单个处理程序和表单css

html:-更新了以使用引导的has反馈和表单控制反馈

 <div class="container">
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="txt1" class="col-sm-2 control-label">Label 1</label>
    <div class="col-sm-10">
     <input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt2" class="col-sm-2 control-label">Label 2</label>
    <div class="col-sm-10">
      <input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
      <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt3" class="col-sm-2 control-label">Label 3</label>
    <div class="col-sm-10">
     <input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>   
   </div>
  </form>
 </div>

示例：

---

我试图避免过多的自定义CSS，在阅读了其他一些示例后，我将这些想法合并到了一起，得到了以下解决方案：

<div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" ng-model="ctrl.searchService.searchTerm" ng-change="ctrl.search()" placeholder="Suche"/>
    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="ctrl.clearSearch()" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
</div>

---

由于我不使用bootstrap的JavaScript，只使用CSS和Angular，我不需要类具有clear和form-control-clear，我在我的AngularJS控制器中实现了clear函数。使用bootstrap的JavaScript，如果没有自己的JavaScript，这可能是可能的。

AngularJS/UI bootstrap Answer

• 使用引导类在输入字段中显示图标
• 确保图标具有

  style=“光标：指针；指针事件：全部；”

• 使用

  ng单击
  清除文本

JavaScript（app.js）

HTML（index.HTML代码段）

文本框

---

下面是一个例子：

使用内联样式和脚本：

<div class="btn-group has-feedback has-clear">
    <input id="searchinput" type="search" class="form-control" style="width:200px;">
        <a 
id="searchclear" 
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear" 
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>

---

这是我的工作解决方案，带有搜索和清除图标，用于使用CSS的Angularjs\Bootstrap

    <div class="form-group has-feedback has-clear">
                    <input type="search" class="form-control removeXicon" ng-model="filter" style="max-width:100%" placeholder="Search..." />
                    <div ng-switch on="!!filter">
                        <div ng-switch-when="false">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                        <div ng-switch-when="true">
                            <span class="glyphicon glyphicon-remove-sign form-control-feedback" ng-click="$parent.filter = ''" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></span>
                        </div>
                    </div>                        
                </div>

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}

------
CSS
/*隐藏内置的IE10+清除字段图标*/
.removeXicon:：-ms清除{
显示：无；
}
/*隐藏内置的chrome clear field图标*/
.removeXicon:：-webkit搜索装饰，
.removeXicon:：-webkit搜索取消按钮，
.removeXicon:：-webkit搜索结果按钮，
.removeXicon:：-webkit搜索结果装饰{
显示：无；
}

不要绑定到元素id，只需使用“上一个”输入元素来清除

CSS:

Javascript:

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

HTML标记，可随意使用：

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

披萨：
面团：

超级简单HTML 5解决方案：

$(".hasclear").keyup(function () {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
    $(this).prev('input').val('').focus();
    $(this).hide();
});

---

如果人们更喜欢Plunker而不是Bootply，那么从可访问性的角度来看，

\searchclear

span最好是一个按钮。这是一个交互元素，所以把它标记为一个交互元素。目前，依赖键盘导航的用户无法在searchclear范围内使用tab键，辅助技术（如屏幕阅读器）也无法轻松识别它。我刚刚尝试了一个解决方案，以防您将此输入与其他元素（如插件、下拉列表等）内联使用，只需删除包装div的类，将其设置为

position:relative

，然后用

z-index:10调整#searchclear；top:10px

和remove

bottom:0

设置top、bottom和height不是一个矛盾吗？在bootstrap v3.3.0之后，您需要将指针事件从none设置为auto，否则您将无法单击表单-控制-反馈。

$（“.Clear”）。隐藏（$（this）.prev（'input'）.val（））做什么？就不能是
$（“.clear”）.hide（）吗？我假设他的意图是传递一个truthy参数to hide（），根据输入是否已经有值开始隐藏/显示。如果这是他的意图，他失败了（隐藏总是隐藏）。它应该是
$（“.clear”）.toggle（！！$（this.prev（'input'）.val（））
您还可以添加一个ng hide to X按钮，以便在输入为空时看不到它。对于清除按钮，请单击“
ng click=“ctrl.searchService.searchTerm=null”
和“
ng show=“ctrl.searchService.searchTerm”
FWIW:我认为这在Chrome中不再有效。也许不再是官方CSS规范的一部分了？W3表示“搜索字段的行为类似于常规文本字段”，而MDN没有提及此功能。MDN确实说它将剥离新行，但对于这种输入类型来说，仅此而已。@KyleFarris上述两种方法在Chrome版本58.0.3029.110（64位）中仍然适用于我。在“清除”按钮出现之前，您需要在搜索框中键入一些内容。这个超评级的答案如何解决OP问题，从而在文本框中显示一个“清除”按钮以清除其内容？如果它不能在所有主要浏览器中工作，这不是一个超级简单的解决方案。@Ananduvia感谢您的报告。我已经更新了我的答案，指定了“bootstrap3”，这是OP发布问题时使用的（2013年）。当我有时间的时候，我会考虑让我的答案适用于Bootstrap4。
.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>