CODEWITHSUNDEEP
phpjavascripthtml
user893970
user893970

Reputation: 899

Deleting value="Comment?" as soon as it is clicked from the input box

I created an input box and says "comments?" before the user enters anything in it.Code;

          <input type="text" name="saysome" value = "comments?"/>

But, i want to delete this "comments?" as soon as it is clicked.I am trying to do input box just like the search box in here, actually exaclty same. How can i do that?Can it be done by only javascipt? :(

Thanks

Upvotes: 1

Views: 90

Answers (6)

GBa
GBa

Reputation: 18397

Non-jquery:

onClick="clearComments()"

function clearComments() {
    commentInput = document.getElementById("commentsId");
    if(commentInput.value == 'comments?') {
       commentInput.value = '';
    }

}

Upvotes: 0

Pedro Lobito
Pedro Lobito

Reputation: 98921

<input type="text" name="saysome" onblur="if(this.value=='') this.value='comments?';" onclick="this.value=''" value="comments?" />

See this example @ http://x.co/Z2pa

Upvotes: 0

Pelle
Pelle

Reputation: 6578

Without jQuery:

Give the input an ID, and clear its value using an onclick event.

<input type="text" name="test" id="test" value="test" onclick="if(document.getElementById('test').value=='test')document.getElementById('test').value='';">

Also supports older browsers that don't use HTML 5.

Upvotes: -1

AaronS
AaronS

Reputation: 7703

Simple method that will clear it anytime the box has focus, and not if the user has entered anything into it

<input type="text" name="TB" value="Please Enter.." onfocus="this.value==this.defaultValue?this.value='':null"/>

Upvotes: 1

Jeff
Jeff

Reputation: 14279

As other commenters mentioned, you should check out placeholder. To answer your question though, this method will remove the text on mouse click if the user has not already entered something. This assumes that the id of the input is textbox. You will have to change it to whatever you have or else assign the input an id.

<input id="textbox" type="text"/>

and the JS:

document.getElementById('textbox').onclick = function()
{
    var box = document.getElementById('textbox');
    if(box.value==box.defaulValue)box.value =='';
}

Upvotes: 0

Norman Joyner
Norman Joyner

Reputation: 955

You can use the html5 placeholder attribute found here: HTML5 Specs

For example: 

 <input type="text" name="saysome" placeholder = "comments?"/>

You could also take a javascript approach for browsers that do not support HTML5.

Upvotes: 3

Related Questions