如何清除引导程序3中的“x”的search框？

引导有一些麻烦，所以一些帮助将是真棒。 谢谢

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

我目前的代码：

<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(''); }); 

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

Answer 2

我试图避免太多的自定义CSS，并阅读了一些其他的例子，我合并了这些想法，并得到了这个解决scheme：

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

因为我不使用引导程序的JavaScript，所以只需将CSS和Angular一起使用，我不需要类清晰和forms控制清晰的类，并且在我的AngularJS控制器中实现了清除function。 用bootstrap的JavaScript，这可能没有自己的JavaScript。

Answer 3

谢谢unwired你的解决scheme是非常干净的。 我正在使用水平引导forms，并做了一些修改，以允许一个处理程序和forms的CSS。

HTML： – 更新使用Bootstrap的反馈和forms控制反馈

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

AngularJS / UI-Bootstrap答案

• 使用Bootstrap的反馈类在input字段内显示一个图标。
• 确保图标有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片段）

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

HTML 5解决scheme：

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

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

这里是我的工作解决scheme与search和清除Angularjs \ Bootstrap与CSS的图标。

  <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'input元素来清除。

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事件清除input字段。

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

在CSS中相应的位置，

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