StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all, <strong>stop using <code>alert</code> to do your debugging!</strong> Grab a copy of Firebug and FireQuery and use those with <code>console.log()</code> instead. Even if you're working with <code>alert()</code>, you really should be using <code>$("input[type='date']").length</code> to find the if the selector returned anything - <code>object [object]</code> isn't telling you anything useful here. </p> <hr> <p>A far superior method for detecting supported input types is to simply create an input element and loop through all of the different input types available and check if the <code>type</code> change sticks: </p> <pre><code>var supported = { date: false, number: false, time: false, month: false, week: false }, tester = document.createElement('input'); for (var i in supported){ try { tester.type = i; if (tester.type === i){ supported[i] = true; } } catch (e) { // IE raises an exception if you try to set the type to // an invalid value, so we just swallow the error } } </code></pre> <p>This actually makes use of the fact that browsers which do not support that particular input type will fall back to using text, thereby allowing you to test if they're supported or not. </p> <p>You can then use <code>supported['week']</code>, for instance, to check for the availability of the <code>week</code> input type, and do your fallbacks through this. See a simple demo of this here: <a href="http://www.jsfiddle.net/yijiang/r5Wsa/2/" rel="nofollow noreferrer">http://www.jsfiddle.net/yijiang/r5Wsa/2/</a>. You might also consider using <a href="http://www.modernizr.com/" rel="nofollow noreferrer">Modernizr</a> for more robust HTML5 feature detection. </p> <hr> <p>And finally, a better way to get <code>outerHTML</code> is to, believe it or not, use <code>outerHTML</code>. Instead of </p> <pre><code>var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase(); </code></pre> <p>Why not just use: </p> <pre><code>var inputAttr = this.outerHTML || new XMLSerializer().serializeToString(this); </code></pre> <p>(Yes, as you can see, there is a caveat - <code>outerHTML</code> isn't supported by Firefox, so we're going to need a simple workaround, from <a href="https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox">this Stack Overflow question</a>). </p> <hr> <p><strong>Edit:</strong> Found a method to do testing for native form UI support, from this page: <a href="http://miketaylr.com/code/html5-forms-ui-support.html" rel="nofollow noreferrer">http://miketaylr.com/code/html5-forms-ui-support.html</a>. Browsers that support the UI for these types in some way <em>should</em> also prevent invalid values from been entered into these fields, so the logical extension to the test we're doing above would be this: </p> <pre><code>var supported = {date: false, number: false, time: false, month: false, week: false}, tester = document.createElement('input'); for(var i in supported){ tester.type = i; tester.value = ':('; if(tester.type === i && tester.value === ''){ supported[i] = true; } } </code></pre> <p>Again, not 100% reliable - this is only good for types that have certain restrictions on their values, and definitely not very good, but it's a step in the right direction, and certainly would solve your problem now. </p> <p><strong>See the updated demo here: <a href="http://www.jsfiddle.net/yijiang/r5Wsa/3/" rel="nofollow noreferrer">http://www.jsfiddle.net/yijiang/r5Wsa/3/</a></strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload