twitter-bootstrap html5 搜索输入不适用于引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13956868/
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
html5 search input does not work with bootstrap
提问by Giolvani
I have tested the input[type="search"]and it does not show the clear (x)icon when the bootstrap styles have been applied.
我已经测试过，input[type="search"]并且(x)在应用引导程序样式时它没有显示清除图标。
采纳答案by sk8terboi87 ツ
An issue related to yours has been already posted in their github https://github.com/twbs/bootstrap/issues/5624
与您相关的问题已发布在他们的 github https://github.com/twbs/bootstrap/issues/5624
回答by Thierry
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
works for me on Chrome (on my Mac, but not on my iPhone...)
适用于我的 Chrome（在我的 Mac 上，但不适用于我的 iPhone...）
回答by Paystey
If you're using Web Kit your problem may be related to what sk8terboi87 posted.
如果您使用的是 Web Kit，您的问题可能与 sk8terboi87 发布的内容有关。
Bootstrap doesn't support styling the Searchtype inputs for you as it's too difficult to do reliably in Web Kit.
Bootstrap 不支持Search为您设置类型输入的样式，因为在 Web Kit 中很难做到可靠。
Bootstrap uses a reset CSS which removes the cross that usually appears, you can get it back by modifying the core CSS, but this could cause issues in the future when upgrading.
Bootstrap 使用重置 CSS 移除通常出现的叉号，您可以通过修改核心 CSS 来恢复它，但这可能会在将来升级时导致问题。
If it's happening in other browsers though it could be another issue.
如果它发生在其他浏览器中，则可能是另一个问题。
回答by MarkMYoung
To have the same user experience across all devices, I ended up writing an Angular directive that I put on Bootstrap 'input-group-btn's.
为了在所有设备上获得相同的用户体验，我最终编写了一个 Angular 指令，并将其放在 Bootstrap 的“input-group-btn”上。
Angular view HTML
角度视图 HTML
<div class="input-group">
<input type="search" id="listItemSearch" class="form-control"
placeholder="Search text..."
title="Search" aria-label="Search"
data-ng-model-options="{'debounce':1500, 'updateOn':'blur default'}"
data-ng-model="vm.filters.listItemSearchText"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
data-ng-disabled="!vm.filters.listItemSearchText"
aria-describedby="listItemSearch"
data-clear-search-by-aria="#listItemSearch">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="input-group-addon">
<span>{{vm.models.listSearchResults.length}}</span>
<span>/</span>
<span>{{vm.data.list.length}}</span>
</span>
</div>
Angular directive JavaScript
Angular 指令 JavaScript
.directive( 'clearSearchByAria', ['$parse', function clearSearchByAria( $parse )
{
return(
{
'restrict':'A',
'link':function clearSearchByAria_link( scope, jqElem, ngAttr )
{
jqElem.on( 'click', function( $event )
{
var $clickedElem = angular.element($event.currentTarget);
var $searchInput;
// Specified by selector.
if( !!ngAttr.clearSearchByAria )
{
var $specifiedElem = angular.element(ngAttr.clearSearchByAria)
if( $specifiedElem.length == 1 )
{$searchInput = $specifiedElem;}
}
else
{
var $describedElem = $clickedElem.find( '[aria-describedby]' ).addBack( '[aria-describedby]' );
// Specified by 'aria-describedby'.
if( $describedElem.length == 1 )
{$searchInput = angular.element(''.concat( '#', $describedElem.attr('aria-describedby')));}
else
{
throw( new ReferenceError( "'clear-search-by-aria' attributes requires either 1) to be empty and for the element (or a descendant) to have an 'aria-describedby' attribute referring to another element or 2) to specify an element selector (e.g. '#id') to another element." ));
}
}
if( !!$searchInput && $searchInput.length == 1 )
{
var ng_model = $searchInput.data( 'ngModel' ) || $searchInput.attr( 'ng-model' );
if( !!ng_model )
{
var modelGetter = $parse( ng_model );
modelGetter.assign( scope, '' );
scope.$apply();
}
else
{
$searchInput.val( '' );
}
}
});
},
});
}])`
回答by divya singh
Change your input type to 'search'instead of 'text' and -webkit-appearance: block instead of 'none'
将您的输入类型更改为 'search' 而不是 'text' 和 -webkit-appearance: block 而不是 'none'
