Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This can be done with jQuery using the following method;</p> <p>HTML;</p> <p><code>&lt;input id="textBox" name="" type="text" value="text here" /&gt;</code></p> <p>The jQuery;</p> <pre><code>$('#textBox').focus(function() { if ($(this).val()==='text here') { $(this).val(''); } }); $('#textBox').blur(function() { if($(this).val()==='') { $(this).val('text here'); } }); </code></pre> <p>This will remove the value of the text box if it is current "text here", then if the user clicks off the box and leaves it empty, it'll add the placeholder text back in. You could change the .focus to simply be a click function to remove any content, regardless of what's in there.</p> <pre><code>$('#textBox').click(function() { $(this).val(''); }); </code></pre> <p>Or you can just use some Javascript in the Input field in HTML like so;</p> <pre><code>&lt;input type="text" value="Text here" onfocus="if(this.value=='Text here')this.value='';" onblur="if(this.value=='')this.value='Text here';" /&gt; </code></pre> <p>Again, this will only remove text on click if the value is "text here" and it'll add "Text here" back in if the user leaves the box empty. But you could adjust the onfocus to remove any content with;</p> <pre><code>&lt;input type="text" value="Text here" onfocus="this.value='';" onblur="if(this.value=='')this.value='Text here';" /&gt; </code></pre> <p>Ensure you've got jQuery included, add this in the ....</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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