epa*_*llo 2 html javascript firefox webkit cross-browser
在 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>