twitter-bootstrap 如何清除引导程序 3 中带有“x”的搜索框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20062218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear a search box with an 'x' in bootstrap 3?
提问by K2SO Ghost Spirit
Having some trouble with bootstrap, so some help would be awesome. Thanks
引导程序有一些问题，所以一些帮助会很棒。谢谢
What I would like:(top part)
我想要什么：（顶部）
My current code:
我目前的代码：
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
Current Screenshot:
当前截图：
回答by unwired
To get something like this
得到这样的东西
with Bootstrap 3 and Jquery use the following HTML code:
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>
and some CSS:
和一些 CSS：
#searchinput {
width: 200px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
and Javascript:
和 Javascript：
$("#searchclear").click(function(){
$("#searchinput").val('');
});
Of course you have to write more Javascript for whatever functionality you need, e.g. to hide the 'x' if the input is empty, make Ajax requests and so on. See http://www.bootply.com/121508
当然，您必须为您需要的任何功能编写更多的 Javascript，例如，如果输入为空，则隐藏 'x'，发出 Ajax 请求等等。见http://www.bootply.com/121508
回答by YipYip
Super-simple HTML 5 Solution:
超简单的 HTML 5 解决方案：
<input type="search" placeholder="Search..." />Source: HTML 5 Tutorial - Input Type: Search
That works in at least Chrome 8, Edge 14, IE 10, and Safari 5 and does not require Bootstrap or any other library. (Unfortunately, it seems Firefox does not support the search clear button yet.)
这至少适用于 Chrome 8、Edge 14、IE 10 和 Safari 5，并且不需要 Bootstrap 或任何其他库。（不幸的是，Firefox 似乎还不支持搜索清除按钮。）
After typing in the search box, an 'x' will appear which can be clicked to clear the text. This will still work as an ordinary edit box (without the 'x' button) in other browsers, such as Firefox, so Firefox users could instead select the text and press delete, or...
在搜索框中输入后，将出现一个“x”，可以单击它来清除文本。这在其他浏览器（例如 Firefox）中仍然可以用作普通编辑框（没有“x”按钮），因此 Firefox 用户可以改为选择文本并按删除，或者...
If you really need this nice-to-have feature supported in Firefox, then you could implement one of the other solutions posted here as a polyfill for input[type=search] elements. A polyfill is code that automatically adds a standard browser feature when the user's browser doesn't support the feature. Over time, the hope is that you'd be able to remove polyfills as browsers implement the respective features. And in any case, a polyfill implementation can help to keep the HTML code cleaner.
如果你真的需要 Firefox 支持的这个不错的功能，那么你可以实现这里发布的其他解决方案之一作为 input[type=search] 元素的 polyfill。polyfill 是当用户的浏览器不支持该功能时自动添加标准浏览器功能的代码。随着时间的推移，希望您能够在浏览器实现相应功能时删除 polyfill。在任何情况下，polyfill 实现都可以帮助保持 HTML 代码更清晰。
By the way, other HTML 5 input types (such as "date", "number", "email", etc.) will also degrade gracefully to a plain edit box. Some browsers might give you a fancy date picker, a spinner control with up/down buttons, or (on mobile phones) a special keyboard that includes the '@' sign and a '.com' button, but to my knowledge, all browsers will at leastshow a plain text box for any unrecognized input type.
顺便说一句，其他 HTML 5 输入类型（例如“日期”、“数字”、“电子邮件”等）也将优雅地降级为简单的编辑框。一些浏览器可能会给你一个花哨的日期选择器、一个带有向上/向下按钮的微调控件，或者（在手机上）一个包含“@”符号和一个“.com”按钮的特殊键盘，但据我所知，所有浏览器至少会为任何无法识别的输入类型显示一个纯文本框。
Bootstrap 3 & HTML 5 Solution
Bootstrap 3 和 HTML 5 解决方案
Bootstrap 3 resets a lot of CSS and breaks the HTML 5 search cancel button. After the Bootstrap 3 CSS has been loaded, you can restore the search cancel button with the CSS used in the following example:
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>Source: HTML 5 Search Input Does Not Work with Bootstrap
I have tested that this solution works in the latest versions of Chrome, Edge, and Internet Explorer. I am not able to test in Safari. Unfortunately, the 'x' button to clear the search does not appear in Firefox, but as above, a polyfill could be implemented for browsers that don't support this feature natively (i.e. Firefox).
我已经测试过此解决方案适用于最新版本的 Chrome、Edge 和 Internet Explorer。我无法在 Safari 中进行测试。不幸的是，用于清除搜索的“x”按钮没有出现在 Firefox 中，但如上所述，可以为原生不支持此功能的浏览器（即 Firefox）实现 polyfill。
回答by Paul Wellner Bou
I tried to avoid too much custom CSS and after reading some other examples I merged the ideas there and got this solution:
我试图避免使用过多的自定义 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>
As I don't use bootstrap's JavaScript, just the CSS together with Angular, I don't need the classes has-clear and form-control-clear, and I implemented the clear function in my AngularJS controller. With bootstrap's JavaScript this might be possible without own JavaScript.
因为我不使用 bootstrap 的 JavaScript，只使用 CSS 和 Angular，所以我不需要类 has-clear 和 form-control-clear，我在我的 AngularJS 控制器中实现了 clear 功能。使用 bootstrap 的 JavaScript，这可能在没有自己的 JavaScript 的情况下成为可能。
回答by LDAdams
Thanks unwiredyour solution was very clean. I was using horizontal bootstrap forms and made a couple modifications to allow for a single handler and form css.
感谢无线您的解决方案非常干净。我正在使用水平引导程序表单并进行了一些修改以允许单个处理程序和表单 css。
html:- UPDATEDto use Bootstrap's has-feedback and form-control-feedback
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:
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();
});
example:http://www.bootply.com/130682
回答by Derek Soike
AngularJS / UI-Bootstrap Answer
AngularJS / UI-Bootstrap 答案
- Use Bootstrap's has-feedbackclass to show an icon inside the input field.
- Make sure the icon has
style="cursor: pointer; pointer-events: all;" - Use
ng-clickto clear the text.
- 使用 Bootstrap 的has-feedback类在输入字段内显示一个图标。
- 确保图标有
style="cursor: pointer; pointer-events: all;" - 使用
ng-click清除文本。
JavaScript (app.js)
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 snippet)
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>
Here's the plunker: http://plnkr.co/edit/av9VFw?p=preview
这是 plunker：http://plnkr.co/edit/av9VFw?p=preview
回答by Denis Sivzov
Do it with inline styles and script:
使用内联样式和脚本执行此操作：
<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>
回答by PavanT
Here is my working solution with search and clear icon for Angularjs\Bootstrap with CSS.
这是我的工作解决方案，带有用于 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;
}
回答by pizzamonster
Do not bind to element id, just use the 'previous' input element to clear.
不要绑定到元素 id，只需使用 'previous' 输入元素来清除。
CSS:
CSS：
.clear-input > span {
position: absolute;
right: 24px;
top: 10px;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #AAA;
}
Javascript:
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 Markup, use as much as you like:
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>
回答by code2use
Place the image (cancel icon) with position absolute, adjust top and left properties and call method onclick event which clears the input field.
将图像（取消图标）放置在绝对位置，调整 top 和 left 属性并调用清除输入字段的方法 onclick 事件。
<div class="form-control">
<input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>
In css position the span accordingly,
在 css 中相应地定位跨度，
#iconSpan {
position : absolute;
top:1%;
left :14%;
}
