在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/