html5 搜索输入不适用于引导程序答案

【问题标题】：html5 search input does not work with bootstraphtml5 搜索输入不适用于引导程序
【发布时间】：2012-12-19 16:33:22
【问题描述】：

我已经测试了input[type="search"]，但在应用引导样式后它没有显示清晰的(x) 图标。

【问题讨论】：

不确定您的意思。您“添加”了哪些引导样式？默认搜索输入框样式由浏览器提供，只要它不
jsfiddle.net/MbDgj/3
Paystey，它可以工作，但是当我添加引导样式时它会停止。查看我添加的小提琴链接

【解决方案1】：

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

适用于我的 Chrome（在我的 Mac 上，但不适用于我的 iPhone...）

【讨论】：

其实对于取消按钮，我想你只需要这个位： input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-取消按钮； }
@Giolvani 请大家做一个扎实的工作，并将其标记为正确答案！谢谢蒂埃里

【解决方案2】：

与您的问题相关的问题已经发布在他们的github

【讨论】：

【解决方案3】：

如果您使用的是 Web Kit，您的问题可能与 sk8terboi87 发布的内容有关。

Bootstrap 不支持为您设置 Search 类型输入的样式，因为在 Web Kit 中很难做到可靠。

Bootstrap 使用了一个重置的 CSS，它移除了通常出现的交叉，您可以通过修改核心 CSS 将其恢复，但这可能会在将来升级时导致问题。

如果它发生在其他浏览器中，尽管它可能是另一个问题。

【讨论】：

【解决方案4】：

为了在所有设备上获得相同的用户体验，我最终编写了一个 Angular 指令，并将其放在 Bootstrap 'input-group-btn's 上。

角度视图 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 指令 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( '' );
                    }
                }
            });
        },
    });
}])`

【讨论】：

【解决方案5】：

将您的输入类型更改为 'search' 而不是 'text' 和 -webkit-appearance: block 而不是 'none'

【讨论】：