在HTML5中,我们有<input type="search" />在多个浏览器上的作用不同。
Webkit在添加文本时添加了一个清除按钮,而Firefox没有。
除了浏览器嗅探之外,是否有其他方法来检测浏览器是否支持清除按钮?

最佳答案

我现在能想出的最好的答案。它是浏览器嗅探的一个级别。它可以很容易打破浏览器升级或用户改变默认行为与一般的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>

关于javascript - HTML type =“search”检测清除按钮支持,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6942207/

10-09 18:35