By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,480 Members | 1,808 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,480 IT Pros & Developers. It's quick & easy.

Remove value of input element onfocus

P: n/a
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
Sep 22 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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>

Sep 22 '05 #2

P: n/a
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);"

Sep 22 '05 #3

P: n/a
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.
Sep 23 '05 #4

P: n/a
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.
Sep 23 '05 #5

P: n/a
Max wrote:
<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.


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>
--
Rob
Sep 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.