Html Type="search" Detect Clear Button Support
In HTML5 we have the which acts differently on multiple browsers. Webkit adds a clear button when text is added and Firefox does not. Is there a way;
Solution 1:
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><metacharset=utf-8 /><title>Test</title></head><body><inputtype="text"id="t1"class="tb"/><br/><inputtype="search"id="s1"class="tb"/><br/><inputtype="search"id="s2"class="tb"/><br/><br/><textareaid="ta"cols="60"rows="5"></textarea><scripttype="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 callthis.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 searchif(this._searchType( element )){
//Add element to page flow so we can read the computed styledocument.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 callthis.searchTypeWithClearButton = function(){
return isSearchWithClear;
}
return isSearchWithClear;
}
}
/*
// Running basic tests:
*///Check for just searchvar x1 = supported.searchType();
var str = "Supports search: \t" + x1 + "\n";
//Check for just search again, make sure cached value worksvar x2 = supported.searchType();
str += "Supports search [run 2]: \t" + x2 + "\n";
//Check for search with clear buttonvar x3 = supported.searchTypeWithClearButton();
str += "Supports search with clear button: \t" + x3 + "\n";
//Check for search with clear button again, make sure cached value worksvar x4 = supported.searchTypeWithClearButton();
str += "Supports search with clear button [run 2]: \t" + x4;
document.getElementById("ta").value = str;
</script></body></html>Solution 2:
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.
Post a Comment for "Html Type="search" Detect Clear Button Support"