Javascript HTML类型="；搜索“；检测清除按钮支持
在HTML5中，我们有在多个浏览器上的不同行为 Webkit在添加文本而Firefox不添加文本时会添加一个清除按钮Javascript HTML类型="；搜索“；检测清除按钮支持,javascript,html,firefox,webkit,cross-browser,Javascript,Html,Firefox,Webkit,Cross Browser,在HTML5中，我们有在多个浏览器上的不同行为 Webkit在添加文本而Firefox不添加文本时会添加一个清除按钮 有没有办法；除了浏览器嗅探，要检测浏览器是否支持清除按钮？这是唯一可靠的方法-尝试创建搜索元素并查看更改是否“持续”： var i = document.createElement('input'); var orig = document.getAttribute('type'); i.setAttribute('type', 'search'); if (orig != i.
有没有办法；除了浏览器嗅探，要检测浏览器是否支持清除按钮？这是唯一可靠的方法-尝试创建搜索元素并查看更改是否“持续”：
var i = document.createElement('input');
var orig = document.getAttribute('type');
i.setAttribute('type', 'search');
if (orig != i.getAttribute('type')) {
... supported ...
}
不过，你可以用它来为你处理检测任务。目前我能想到的最佳答案。这是浏览器嗅探的一个级别。如果浏览器升级或用户使用通用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>
试验
支持的变量={
getCSSValue:函数（元素、属性）{
var cs=document.defaultView.getComputedStyle（元素，null）；
返回cs.getPropertyValue（属性）；
},
_makeSearchElem:function（）{
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“搜索”）；
返回元素；
},
//检查是否支持type=“search”
searchType:function（）{
var elm=这个；
var结果=此。\搜索类型（elm）；
elm=null；
//重新定义，这样我们就不必每次呼叫都重新呼叫
this.searchType=函数（）{
返回结果；
}
返回结果；
},
_searchType:函数（元素）{
return element.type==“搜索”；
},
//检查type=“search”是否受支持，以及是否有“clean”按钮
//这几乎达到了浏览器嗅探的水平，因为目前只有WebKit支持它
searchTypeWithClearButton:函数（）{
/*
假设开发人员没有使用CSS禁用清除按钮
输入[type=“search”]：-webkit搜索取消按钮{-webkit外观：无；}
检测这种情况的唯一方法是遍历样式表，并将正则表达式与选择器和cssText匹配[恶心]
*/
var isSearchWithClear=false；
var元素=这个；
element.style.display=“无”；
//在检查CSS之前，请确保类型为“搜索”
if（本搜索类型（元素））{
//将元素添加到页面流中，以便可以读取计算样式
document.body.appendChild（元素）；
var webkiteappearance=this.getCSSValue（元素“--webkit外观”）；
document.body.removeChild（元素）；
isSearchWithClear=webkitAppearance==“searchfield”；//如果有人添加泛型类以将其更改为textfield，则此操作可能会中断。
}
元素=空；
//重新定义，这样我们就不必重新呼叫
this.searchTypeWithClearButton=函数（）{
返回是用Clear搜索的；
}
返回是用Clear搜索的；
}
}
/*
//运行基本测试：
*/
//检查是否只是搜索
var x1=supported.searchType（）；
var str=“支持搜索：\t”+x1+“\n”；
//再次检查“仅搜索”，确保缓存的值有效
var x2=supported.searchType（）；
str+=“支持搜索[运行2]：\t”+x2+“\n”；
//使用“清除”按钮检查搜索
var x3=supported.searchTypeWithClearButton（）；
str+=“支持使用清除按钮进行搜索：\t”+x3+“\n”；
//再次使用“清除”按钮检查搜索，确保缓存值有效
var x4=受支持。searchTypeWithClearButton（）；
str+=“支持使用清除按钮进行搜索[run 2]：\t”+x4；
document.getElementById（“ta”）.value=str；