Background text in textbox

Question

Hi All,

I want to display a background text in the textbox.

ex: The Title textbox in the stackoverflow Ask question page.

Needs: If i enter some text inside the textbox it should disappear.

Geetha.

Answer 1

A good link is http://attardi.org/labels as referenced here http://stackoverflow.com/questions/781473/how-to-create-a-label-inside-an-input-element

Answer 2

You need to use javascript for the same.

Use following two functions in javascript and it is done.

        function clearDefault(obj,val)
        {
            objInput=document.getElementById(obj);
            if(objInput.value==val)
            {
                objInput.value="";
            }
        }
        function setDefault(obj,val)
        {
            objInput=document.getElementById(obj);
            if(objInput.value=="")
            {
                objInput.value=val;
            }
        }

You need to apply it on your code by using two javascript events as follow.

    <input name="email" type="text" class="textbox" id="email" 
  value="Email" size="12" onfocus="clearDefault('email','Email');" 
  onblur="setDefault('email','Email');"/>

So when you control get focus it the default text will be cleared. Ant That's it.

Hope this will help!

Answer 3

Well, since you put jquery as a tag for the question, I assume you're already using jquery for your project. In that case, here's a neat plugin that does the trick: Labelify. Good luck!