HTML type = "search" обнаруживает поддержку кнопки очистки - PullRequest
Новая
       13

HTML type = "search" обнаруживает поддержку кнопки очистки

2 голосов
/ 04 августа 2011

В HTML5 у нас есть <input type="search" />, который действует по-разному в нескольких браузерах.

Webkit добавляет кнопку очистки при добавлении текста, а Firefox - нет.

Есть ли способ;кроме перехвата браузера, чтобы определить, поддерживается ли браузером кнопка сброса?

Ответы [ 2 ]

4 голосов
/ 05 августа 2011

Лучший ответ, который я могу придумать на данный момент.Это один уровень под анализом браузера.Это может легко сломаться при обновлении браузера или изменении пользователем поведения по умолчанию с помощью общих правил CSS. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Test</title>
  </head>
  <body>
    <input type="text" id="t1" class="tb"/><br/>
    <input type="search" id="s1" class="tb"/><br/>
    <input type="search" id="s2" class="tb"/><br/><br/>
    <textarea id="ta" cols="60" rows="5"></textarea>
    <script type="text/javascript">


        var supported = {

            getCSSValue: function(element, property) {
                var cs = document.defaultView.getComputedStyle(element, null);
                return cs.getPropertyValue(property);
            },

            _makeSearchElem : function(){    
                var element = document.createElement("input");
                element.setAttribute("type","search");    
                return element;
            },

            //checks to see if type="search" is supported
            searchType : function(){
                var elm = this._makeSearchElem();
                var result = this._searchType( elm );
                elm = null;
                //redefine so we do not have to recalc this every call
                this.searchType = function(){
                    return result;
                }
                return result;
            },

            _searchType : function(element){        
                return element.type === "search";
            },

            //checks to see if type="search" is supported AND it has the clean button
            //This is almost to the level of browser sniffing since only WebKit supports it at the moment
            searchTypeWithClearButton : function( ){

                /*
                    Assumes that the developer does not disable the clear button with CSS
                        input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
                    Only way to detect that would be to walk the style sheet and regex match the selector and cssText [Yuck]
                */

                var isSearchWithClear = false;

                var element = this._makeSearchElem();
                element.style.display = "none";            

                //Before we check CSS make sure the type is search
                if(this._searchType( element )){

                    //Add element to page flow so we can read the computed style
                    document.body.appendChild( element );        
                    var webkitAppearance = this.getCSSValue(element, "-webkit-appearance");
                    document.body.removeChild( element );

                    isSearchWithClear = webkitAppearance === "searchfield";  //this may break if someone adds a generic class to change it to textfield.

                }

                element = null;

                //redefine so we do not have to recalc every call
                this.searchTypeWithClearButton = function(){
                    return isSearchWithClear;
                }

                return isSearchWithClear;

            }

        }        

        /*
        //    Running basic tests:
        */

        //Check for just search
        var x1 = supported.searchType();
        var str = "Supports search: \t" + x1 + "\n";

        //Check for just search again, make sure cached value works
        var x2 = supported.searchType();
        str += "Supports search [run 2]: \t" + x2 + "\n";


        //Check for search with clear button
        var x3 = supported.searchTypeWithClearButton();
        str += "Supports search with clear button: \t" + x3 + "\n";

        //Check for search with clear button again, make sure cached value works
        var x4 = supported.searchTypeWithClearButton();
        str += "Supports search with clear button  [run 2]: \t" + x4;

        document.getElementById("ta").value = str;

    </script>
  </body>
</html>
0 голосов
/ 04 августа 2011

Это единственный надежный способ - попробуйте создать поисковый элемент и посмотреть, будет ли изменение «залипать»: 

var i = document.createElement('input');
var orig = document.getAttribute('type');
i.setAttribute('type', 'search');
if (orig != i.getAttribute('type')) {
   ... supported ...
}

Вы можете использовать Modernizr для обработки обязанностей по обнаружению дляты же.

...