StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<pre><code><input class="hint" type="text" name="username" value="Enter your Username" data-hint="Enter your Username" /> <input class="hint" type="text" name="email" value="Enter your Email" data-hint="Enter your Email" /> <input class="hint" type="text" name="city" value="Enter your City" data-hint="Enter your City" /> <script type="text/javascript"> // handler for form elements when they receive onfocus function removeVal() { // get default value from attribute 'data-hint' and compare the current value if ( this.value == this.getAttribute( 'data-hint' ) ) { // if current value equal default value, set value to empty this.value = ""; } } // handler for form elements when they receive onblur function inserDefVal() { // if current value equal empty if ( this.value == "" ) { // get default value from attribute and set her to field value. // if attribute not found to set empty this.value = this.getAttribute( 'data-hint' ) || ""; } } // search elements by className function addEvents( className ) { var i, j, elem, all, elems = []; // If your browser supports "getElementsByClassName", use it if ( document.getElementsByClassName ) { // search elements by class name elems = document.getElementsByClassName( className ); } else { // search elements by class name for IE7-8. // IE7-8 not support native "getElementsByClassName" all = document.getElementsByTagName( "*" ); // pass on all the elements for( j = 0; elem = all[ j++ ]; ) { // check for the presence of our class name if ( (" " + elem.className + " ").indexOf( " " + className + " " ) >= 0 ) { // is found the className, put an item in the stack elems[ elems.length ] = elem; } } } // hang on found items the events for( i = 0; elem = elems[ i++ ]; ) { elem.onfocus = removeVal; elem.onblur = inserDefVal; } } // initialize elements by className "hint" addEvents( 'hint' ); </script> </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