Remove value of input element onfocus

[Max]

I've got a default value of some text in an input element when a page loads.
What I'd like to do is have the value disappear when the user clicks in the
input field.

I've figured out I can use:

onclick="this.value='';"

This works fine, however if for some reason the user adds his own input,
then click somewhere else/clicks back, the text has once again been erased.

So I thought of a function like the following, however it does not work:

function removeinput(x) {

if (x == 'Enter items not on standard list here...') {

x = '';

}
}

onclick="removeinput(this.value);"

I've also tried placing this.value inside of single quotes to no avail.

What am I doing wrong? Or do I just have the complete wrong approach here?

Thanks,
Max

 

[Java script Dude]

This should do what you are looking for:

<input name=tbTest type=text onfocus='tbTest_focus(event,this)'
value='enter some text' size=30>

<script>

function tbTest_focus(e,o){
if(o.firstTime){return}
o.firstTime=true
o.value=""
}

</script>

 

[Lee]

Max said:

I've got a default value of some text in an input element when a page loads.
What I'd like to do is have the value disappear when the user clicks in the
input field.

I've figured out I can use:

onclick="this.value='';"

This works fine, however if for some reason the user adds his own input,
then click somewhere else/clicks back, the text has once again been erased.

So I thought of a function like the following, however it does not work:

function removeinput(x) {

if (x == 'Enter items not on standard list here...') {

x = '';

}
}

onclick="removeinput(this.value);"

I've also tried placing this.value inside of single quotes to no avail.

What am I doing wrong? Or do I just have the complete wrong approach here?

The value attribute is a primitive string, so it is always passed
by value. In other words, "x" is a new variable containing the
same value as the argument. Changing it only changes the copy.

On the other hand, the keyword "this" is a reference to an Object, so
if you pass it, you can change the attributes of the Object that it
refers to. Also, you probably want to use the onfocus handler, not
the onclick:

function removeinput(x) {
if (x.value == 'Enter items not on standard list here...') {
x.value = '';
}
}

onfocus="removeinput(this);"

 

[Max]

The value attribute is a primitive string, so it is always passed

by value. In other words, "x" is a new variable containing the
same value as the argument. Changing it only changes the copy.

On the other hand, the keyword "this" is a reference to an Object, so
if you pass it, you can change the attributes of the Object that it
refers to. Also, you probably want to use the onfocus handler, not
the onclick:

function removeinput(x) {
if (x.value == 'Enter items not on standard list here...') {
x.value = '';
}
}

onfocus="removeinput(this);"

Thanks a bunch. It works great, and now I understand a bit more about the
concept.

 

[Max]

<input name=tbTest type=text onfocus='tbTest_focus(event,this)'

value='enter some text' size=30>

<script>

function tbTest_focus(e,o){
if(o.firstTime){return}
o.firstTime=true
o.value=""
}

</script>

This worked great as well as the second responder. I guess this one is more
portable and not dependant on what the default value of the input element
is.

 

[RobG]

This worked great as well as the second responder. I guess this one is more
portable and not dependant on what the default value of the input element
is.

Except that if your form has a reset button, it will set the value back
to the default and subsequent focuses won't clear the value. There
seems no point in passing 'event' as it isn't used for anything.

Try this version another:

<form action="">
<input name="tbTest" type="text"
onfocus="tbTest_focus(this);"
value="enter some text" size="30">
<input type="reset">
</form>

<script type="text/javascript">

function tbTest_focus(el)
{
if(el.V) {
if (el.value == el.V) {
el.value = '';
}
} else {
el.V = el.value;
el.value = '';
}
}
</script>