web-dev-qa-db-fra.com

l'entrée de recherche html5 ne fonctionne pas avec bootstrap

J'ai testé le input[type="search"] et il ne montre pas l'icône claire (x) lorsque les styles d'amorçage ont été appliqués.

html5twitter-bootstrap
30
Giolvani

Un problème lié au vôtre a déjà été posté dans leur github https://github.com/twbs/bootstrap/issues/5624

5
sk8terboi87 ツ
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;
}

fonctionne pour moi sur Chrome (sur mon Mac, mais pas sur mon iPhone ...)

48
Thierry

Pour avoir la même expérience utilisateur sur tous les périphériques, j'ai fini par écrire une directive Angular que j'ai mise sur Bootstrap 'input-group-btn's.

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

Directive angulaire 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( '' );
                    }
                }
            });
        },
    });
}])`
1
MarkMYoung

Si vous utilisez Web Kit, votre problème peut être lié à ce que sk8terboi87 a posté. 

Bootstrap ne prend pas en charge le style des entrées de type Search car il est trop difficile de le faire de manière fiable dans Web Kit.

Bootstrap utilise un CSS de réinitialisation qui supprime la croix qui apparaît habituellement. Vous pouvez le récupérer en modifiant le CSS principal, mais cela pourrait entraîner des problèmes lors de la mise à niveau.

Si cela se produit dans d'autres navigateurs, cela pourrait être un autre problème.

0
Paystey