HTML 类型=“搜索”检测清除按钮支持

发布于 2024-11-27 22:15:43 字数 238 浏览 0 评论 0原文

在 HTML5 中，我们有在多个浏览器上的行为有所不同。

添加文本时，Webkit 会添加一个清除按钮，而 Firefox 不会。

有没有办法；除了浏览器嗅探之外，还可以检测浏览器是否支持清除按钮？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芸娘子的小脾气 2024-12-04 22:15:43

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

Best answer I can come up with at the moment. It is one level under browser sniffing. It can break easily with browser upgrades or users changing the default behavior with generic CSS rules.

<!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 原文

不打扰别人 2024-12-04 22:15:43

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

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

您可以使用 Modernizr 不过，为您处理检测职责。

This about the only reliable way - try to create a search element and see if the change 'sticks':

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

You can use Modernizr to handle the detection duties for you, though.

回复收藏 0 原文

~没有更多了~