clearing form textboxes when clicked...

SooTyLaD

SooTyLaD

SooTyLaD

Soldato
Joined
19 Oct 2002
Posts
3,480
hi guys,

you know that very common feature of a form where when you click it, the text disappears for you to type?

well i figured that this does the job...

onclick="this.value=''"

in the input tag, but how to you get the test to revert back to how it was if you click off again?

a good example is here: http://www.vidahost.com/index.php if you click the email address bit of the client login at the right... can't see the bit in the code that snaps it back...

any ideas?
 
Add an 'onblur=""' event to the same input box, and in that function check if the text in the input box is blank, then if it is replace the textbox value with the orignal text.
 
<input type="text" onClick="this.value=''" onBlur="this.value='Type Here'">

:)

Jon

Edit: You're better off going with onFocus in place on onClick, because the user might use the tab key to move the cursor to the input box. In that scenario, the box would not have been clicked and so the onClick event won't happen; and the text will not be removed.
 
Last edited:
I might be able to help here ;)

Code: 
onclick="this.value=''" onblur="updateUsername();"
The former decides what to do when it's clicked (wipe the content), and the latter decides what to do when the focus is lost (ie the user clicks something else.)

The function checks if the box is empty (don't want to overwrite what people have typed in), and then puts in the appropriate message depending on which option's selected, using the same .value='something' method :)
 
ahh i see... well i havn't been able to achieve the effect i was after so i attempted to write my own bit of JS, but there is something basic wrong with it but i'm not good enough to spot it, could someone cast their eyes over this?

Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus=textClear('Your Name') onBlur=textRefill('Your Name') />

Code: 
<script language=JavaScript>
<!-- 
function textClear(content)
{
if (document.brochureRequest.from.value == content)
document.brochureRequest.from.value = "";
} 

function textRefill(content)
{
	if (document.brochureRequest.from.value == "")
	  document.brochureRequest.from.value = content;
}
-->
</script>

what i want to happen is:

• if you click the text box which conatains "Your Name" - it will clear it for you.
• if you then dont enter anything and click away, if will return to "Your Name"
• if you have entered somthing different, if will not be deleted or replaced regardless of what you do.

this code worked when i didn't use a variable, so it looked like this:

Code: 
function textClear()
{
if (document.brochureRequest.from.value == "Your Name")
document.brochureRequest.from.value = "";
}

but this would require multiple bits of JS for every textbox, this new way of thinking just means you can do the work from the html and leave the JS alone, nice idea but something if fundamentlaly wrong with my syntax i'm guessing, any ideas?
 
Just one tiny thing you missed mate:

Replace your line with this one:
Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus="textClear('Your Name')" onBlur="textRefill('Your Name')" />

The onFocus and onBlur event handlers have to have XXX="blah". You missed the quotes.

Ie. You put:
onFocus=textClear('Your Name')
It should be
onFocus="textClear('Your Name');"

Apart from that, nicely done. Works a treat ;)

Jon
 
superb :)

as an extension to that... you'll notice i have used document.brochureRequest.from

just realised this wont work for other ones as it wont be "from" anymore, and it wont work with another form either cuz this is only for "brochureRequest"

is there anyway to make it work regardless of the form and texbox names? summat like documet.thisform.thistextbox.value or summat like that?

EDIT: dont think i've explained this very well...

i mean i just want to avoid having the JS look like this:

Code: 
function textClear(content)
{

if (document.brochureRequest.from.value == content)
document.brochureRequest.from.value = "";

if (document.brochureRequest.email.value == content)
document.brochureRequest.email.value = "";

if (document.brochureRequest.message.value == content)
document.brochureRequest.message.value = "";

}

see what i mean?
 
Last edited:
i thought of a way to make the script more globally useable, but once again i've hit a snag...

Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus="textClear('from','Your Name')" onBlur="textRefill('from','Your Name')" />

Code: 
function textClear(field,content)
{
  if (document.brochureRequest.field.value == content) document.brochureRequest.field.value = "";
} 

function textRefill(field,content)
{
	if (document.brochureRequest.field.value == "") document.brochureRequest.field.value = content;
}

this way (although i cant seem to just simply make it work regardless of form name (document.form. etc didn't work)) i should be able to pass it the field and content and it should work regardless of which text box it came from, but i dont think it likes me using the "field" string as part of the document.brochureRequest.[thisbit].value part...

any ideas?

also, will this ever work on textarea bits since they dont use "value"?
 
Code: 
function textClear(field,content)
{
  if (field.value == content) 
  field.value = "";
} 

function textRefill(field,content)
{
  if (field.value == "")
  field.value = content;
}

Is best for the js then the input line should be:
Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus="textClear(this,'Your Name')" onBlur="textRefill(this,'Your Name')" />

The "this" is a reference to the current object in the DOM i.e. that textfield.
 
You must log in or register to reply here.
Back
Top Bottom