How can I consistently detect browser support for HTML5 search inputs

Questions

I have a search input on an HTML 5 page that I need to work in multiple browsers:

<input type="search" placeholder="type here..." />

I detect whether the browser supports search by seeing whether the browser rendered it as a search input or a regular text one:

var supportsHtml5Search = !!(inputDomElement.type !==  text );
if (supportsHtml5Search) {
    inputDomElement.addEventListener( search , searchFunction);
}
else {
    // This browser doesn t support onsearch event, so handle keyup instead
    inputDomElement.addEventListener( keyup , searchFunction);
}

This worked fine - Chrome and Safari used the onsearch event (which also helpfully fires when they hit the clear X icon) and IE used the keyup event (with some additional checks not shown here).

However that seems to be broken in IE10, which displays a search exactly the same as an <input type="text" /> (like IE9 and below) and returns search as the type (like Chrome/Webkit), but doesn t fire the onsearch event.

Is there a better way to detect search input support?

What is the best way to sniff for this feature s support?

Answers

http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

Basically, one has to test a corresponding property (onsearch for search event, for example) of the corresponding elements. Like...

 onsearch  in document.documentElement; // true in Chrome, false in Firefox/Opera

It s noted in the article that Firefox will fail the check if it s done on the wrong element, but I actually found only Opera behaving that way:

 onchange  in document.documentElement; // false in Opera, true in Firefox/Chrome
 onchange  in document.createElement( input ); // true in Opera too

As a final resort, one can attempt to assign a handler for this element, then check this property again:

var el = document.createElement( input ); 
el.setAttribute( onsearch ,  return; ); 
typeof el.onsearch; //  function  in Chrome,  undefined  in Firefox/Opera

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/15138472/how-can-i-consistently-detect-browser-support-for-html5-search-inputs

Related