Die HTML5-Sucheingabe funktioniert nicht mit Bootstrap

Ich habe die getestet input[type="search"] und es zeigt nicht das Klare (x) Symbol, wenn die Bootstrap-Stile angewendet wurden.

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

funktioniert für mich auf Chrome (auf meinem Mac, aber nicht auf meinem iPhone …)

Ein Problem, das sich auf Ihr Problem bezieht, wurde bereits in ihrem gepostet github

Wenn Sie Web Kit verwenden, hängt Ihr Problem möglicherweise mit dem zusammen, was sk8terboi87 gepostet hat.

Bootstrap unterstützt das Styling nicht Search Geben Sie Eingaben für Sie ein, da dies in Web Kit zu schwierig ist, um dies zuverlässig zu tun.

Bootstrap verwendet ein zurückgesetztes CSS, das das normalerweise angezeigte Kreuz entfernt. Sie können es wiederherstellen, indem Sie das Kern-CSS ändern, aber dies könnte in Zukunft Probleme beim Upgrade verursachen.

Wenn es in anderen Browsern passiert, könnte es ein anderes Problem sein.

Um die gleiche Benutzererfahrung auf allen Geräten zu haben, habe ich schließlich eine Angular-Direktive geschrieben, die ich in Bootstrap ‚input-group-btn‘s eingefügt habe.

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

Winkeldirektive 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( '' );
                    }
                }
            });
        },
    });
}])`

Ändern Sie Ihren Eingabetyp auf “Suche” statt “Text” und -Webkit-Aussehen: Block statt “Keine”.