Question

在HTML5中，我们有<input type="search" />，它在多个浏览器上的行为方式不同。

Webkit在添加文本时添加了一个清除按钮，而Firefox则没有。

有办法吗？除浏览器嗅探外，检测浏览器是否支持清除按钮？

Answer 1

目前我能想出的最佳答案。它是浏览器嗅探下的一个级别。它可以通过浏览器升级或用户使用通用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>

Answer 2

这是唯一可行的方法 - 尝试创建一个搜索元素并查看更改是否“坚持”：

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

但是，您可以使用Modernizr来处理检测任务。

HTML type =“search”检测清除按钮支持

2 个答案: