Вход для ввода html5 не работает с загрузкой

Ответ 1

Проблема, связанная с вашей, уже отправлена ​​в их github https://github.com/twbs/bootstrap/issues/5624

Ответ 2

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...)

Ответ 3

Если вы используете Web Kit, ваша проблема может быть связана с тем, что опубликовал sk8terboi87.

Bootstrap не поддерживает стиль ввода типов Search для вас, поскольку это слишком сложно сделать надежно в веб-кит.

Bootstrap использует CSS reset, который удаляет крест, который обычно появляется, вы можете вернуть его, изменив основной CSS, но это может вызвать проблемы в будущем при обновлении.

Если это происходит в других браузерах, это может быть другой проблемой.

Ответ 4

Чтобы иметь тот же пользовательский интерфейс на всех устройствах, я в конечном итоге написал директиву Angular, которую я установил для ввода-группы-btn Bootstrap.

Angular просмотр 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( '' );
                    }
                }
            });
        },
    });
}])`