StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would have taken a different approach (It's not entirely my idea, but i can't find the source for credit):</p> <p>1st - Use html5 "placeholder" property.</p> <p>2nd - Use <a href="http://www.modernizr.com/" rel="nofollow noreferrer">Modernizr.js</a> to detect support of placeholders in the browser and a simple jQuery script to add support to browsers that doesn't support it.</p> <p>So, the html will look something like that:</p> <pre><code><input type="text" class="placeholder" placeholder="Help Text" /> <textarea class="placeholder" placeholder="Another help text"></textarea> </code></pre> <p>The css:</p> <pre><code>.placeholder{color:#ccc;} </code></pre> <p>And the javascript:</p> <pre><code>/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'> * Depends on Modernizr v1.5 */ if (!Modernizr.input.placeholder){ $('input[placeholder], textarea[placeholder]') .focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }) .blur(function() { var input = $(this); if (input.val() == '') { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }) //Run once on load .blur(); // Clear all 'placeholders' on submit $('input[placeholder], textarea[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }); }); } </code></pre>

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