đầu vào tìm kiếm html5 không hoạt động với bootstrap

Question

Tôi đã thử nghiệm đầu vào [type = "search"] và nó không hoạt động nếu tôi thêm kiểu bootstrap. tức là, biểu tượng rõ ràng (x) không xuất hiện.

Answer 1

Một vấn đề liên quan đến bạn đã được đã được đăng trong github của họ https://github.com/twbs/bootstrap/issues/5624

Answer 2

Nếu bạn đang sử dụng Web Kit vấn đề của bạn có thể liên quan đến những gì sk8terboi87 đăng.

Bootstrap không hỗ trợ tạo kiểu cho các đầu vào loại Search cho bạn vì quá khó để thực hiện đáng tin cậy trong Bộ công cụ Web.

Bootstrap sử dụng CSS đặt lại xóa dấu thập tự thường xuất hiện, bạn có thể lấy lại bằng cách sửa đổi CSS lõi, nhưng điều này có thể gây ra sự cố trong tương lai khi nâng cấp.

Nếu nó xảy ra trong các trình duyệt khác mặc dù nó có thể là một vấn đề khác.

Answer 3

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

công trình đối với tôi trên Chrome (trên máy Mac của tôi, nhưng không phải trên iPhone của tôi ...)

Answer 4

Để có kinh nghiệm cùng một người dùng trên tất cả các thiết bị, tôi đã kết thúc viết một chỉ thị góc mà tôi đặt trên Bootstrap 'input-group-btn's.

góc độ xem 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> 

chỉ thị góc 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(''); 
        } 
       } 
      }); 
     }, 
    }); 
}])`