如何在引导程序 3 中清除带有“x”的搜索框？

Question

在引导方面遇到了一些问题，所以一些帮助会很棒。谢谢

我想要什么：（上半部分）

我当前的代码：

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

当前截图：

Answer 1

为了得到这样的东西

使用 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>

还有一些 CSS：

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

和 Javascript：

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

当然，您必须为您需要的任何功能编写更多的 Javascript，例如如果输入为空，则隐藏“x”，发出 Ajax 请求等。见http://www.bootply.com/121508

Answer 2

超简单的 HTML 5 解决方案：

<input type="search" placeholder="Search..." />

来源：HTML 5 Tutorial - Input Type: Search

至少可以在 Chrome 8、Edge 14、IE 10 和 Safari 5 中使用，并且不需要 Bootstrap 或任何其他库。 （很遗憾，Firefox 似乎还不支持搜索清除按钮。）

在搜索框中输入后，会出现一个“x”，单击该“x”可以清除文本。这在其他浏览器（例如 Firefox）中仍可用作普通编辑框（没有“x”按钮），因此 Firefox 用户可以改为选择文本并按删除，或者...

如果您真的需要 Firefox 支持的这个不错的功能，那么您可以实现此处发布的其他解决方案之一，作为 input[type=search] 元素的 polyfill。 polyfill 是在用户的浏览器不支持该功能时自动添加标准浏览器功能的代码。随着时间的推移，希望您能够在浏览器实现相应功能时删除 polyfill。在任何情况下，polyfill 实现都可以帮助保持 HTML 代码更简洁。

顺便说一句，其他 HTML 5 输入类型（例如“日期”、“数字”、“电子邮件”等）也会优雅地降级为普通的编辑框。一些浏览器可能会给你一个花哨的日期选择器，一个带有向上/向下按钮的微调控件，或者（在手机上）一个包含“@”符号和“.com”按钮的特殊键盘，但据我所知，所有浏览器至少会为任何无法识别的输入类型显示一个纯文本框。

---

Bootstrap 3 & HTML 5 解决方案

Bootstrap 3 重置了大量 CSS 并破坏了 HTML 5 搜索取消按钮。加载 Bootstrap 3 CSS 后，您可以使用以下示例中使用的 CSS 恢复搜索取消按钮：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
<div class="form-inline">
  <input type="search" placeholder="Search..." class="form-control" />
</div>

来源：HTML 5 Search Input Does Not Work with Bootstrap

我已测试此解决方案可在最新版本的 Chrome、Edge 和 Internet Explorer 中运行。我无法在 Safari 中进行测试。不幸的是，用于清除搜索的“x”按钮不会出现在 Firefox 中，但如上所述，可以为原生不支持此功能的浏览器（即 Firefox）实现 polyfill。

Answer 3

我试图避免过多的自定义 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，我不需要 has-clear 和 form-control-clear 类，我在 AngularJS 控制器中实现了 clear 功能。使用 bootstrap 的 JavaScript，这可能不需要自己的 JavaScript。

Answer 4

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

html: - 更新以使用 Bootstrap 的 has-feedback 和 form-control-feedback

 <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>

javascript:

$(".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();
});

示例： http://www.bootply.com/130682

Answer 5

AngularJS / UI-Bootstrap 答案

• 使用 Bootstrap 的 has-feedback 类在输入字段中显示一个图标。
• 确保图标有style="cursor: pointer; pointer-events: all;"
• 使用ng-click 清除文本。

JavaScript (app.js)

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.params = {};

  $scope.clearText = function() {
    $scope.params.text = null;
  }

});

HTML (index.html sn-p)

      <div class="form-group has-feedback">
        <label>text box</label>
        <input type="text"
               ng-model="params.text"
               class="form-control"
               placeholder="type something here...">
        <span ng-if="params.text"
              ng-click="clearText()"
              class="glyphicon glyphicon-remove form-control-feedback" 
              style="cursor: pointer; pointer-events: all;"
              uib-tooltip="clear">
        </span>
      </div>

这里是 plunker：http://plnkr.co/edit/av9VFw?p=preview

Answer 6

用内联样式和脚本来做：

<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>

Answer 7

这是我的工作解决方案，带有 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; 
}

Answer 8

不要绑定到元素id，只使用'previous'输入元素来清除。

CSS：

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

Javascript：

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>

Answer 9

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

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

在css中相应地定位span，

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}