html5 खोज इनपुट बूटस्ट्रैप

Question

के साथ काम नहीं करता है मैंने इनपुट [type = "search"] का परीक्षण किया है और यदि मैं बूटस्ट्रैप शैलियों को जोड़ता हूं तो यह काम नहीं करता है। यानी, स्पष्ट आइकन (x) प्रकट नहीं होता है।

Answer 1

तुम्हारा से संबंधित समस्या पहले से ही अपने GitHub https://github.com/twbs/bootstrap/issues/5624

Answer 2

में नियुक्त किया गया है आप वेब किट तुम्हारी समस्या क्या तैनात sk8terboi87 से संबंधित हो सकता उपयोग कर रहे हैं।

बूटस्ट्रैप Search आपके लिए इनपुट इनपुट स्टाइलिंग का समर्थन नहीं करता है क्योंकि वेब किट में विश्वसनीय रूप से करना मुश्किल है।

बूटस्ट्रैप एक रीसेट सीएसएस का उपयोग करता है जो आमतौर पर दिखाई देने वाले क्रॉस को हटा देता है, आप कोर सीएसएस को संशोधित करके इसे वापस प्राप्त कर सकते हैं, लेकिन यह अपग्रेड करते समय भविष्य में समस्याएं पैदा कर सकता है।

यदि यह अन्य ब्राउज़रों में हो रहा है हालांकि यह एक और मुद्दा हो सकता है।

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

क्रोम पर मेरे लिए काम करता है (अपने Mac पर हूं, लेकिन अपने iPhone पर ...)

Answer 4

सभी उपकरणों पर समान उपयोगकर्ता अनुभव के लिए, मैं एक कोणीय निर्देश है कि मैं डाल लेखन समाप्त हो गया बूटस्ट्रैप 'इनपुट-समूह-बीटीएन पर।

कोणीय दृश्य एचटीएमएल

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