...

View Full Version : focus only if...



Bambam007
10-03-2008, 02:31 PM
Hi a quick javascript question,
I have a form text input and onfocus I only want it to focus if the value states your name

Here is the form code

<input type="text" size="30" maxlength="50" name="name" value="your name" onfocus="referfocus();">

here is the Javascript

function referfocus() {
if (document.form.name.value == 'your name'){
document.form.name.focus();
return false;
}
}

Can anyone see something wrong? It doesn't work as it is by the way

mattyod
10-03-2008, 02:49 PM
A bit back to front here.

What your saying is that when the form field gets focus, if it's value matches 'your name' give it focus (which it already has). Instead you need to say if it doesn't match 'your name' remove it's focus.

So assuming you have called your form 'form' (perhaps not a great name for it)



<form name="form">
<input type="text" size="30" maxlength="50" name="name" value="your name" onfocus="referfocus();">
</form>


You would need:



function referfocus() {
if (document.form.name.value != 'your name'){
document.form.name.blur();
return false;
}
}


Though you do realise that people will never be able to edit this form field once the value has been changed? I'm struggling to think of a time when this would make for a good user experience.

Bambam007
10-03-2008, 03:13 PM
Hi,

What I need essentially is when I click in the input field, i need the text to disappear so i can type what I like.
However if the text has already been changed then I want it to stay as is(not disappear) but still be editable

This way if something needs to be corrected it can with out it disappearing.
I only want it to disappear on the initial value.

mattyod
10-03-2008, 05:07 PM
Aah, then we really where barking up the wrong tree. Try this.



<form name="form">
<input type="text" size="30" maxlength="50" name="name" value="your name" onfocus="clearValue()" onblur="resetValue()">
</form>


I've added an onblur event for tidyness too.



function clearValue() {
if (document.form.name.value == 'your name') {
document.form.name.value = '';
}
}

function resetValue() {
if (document.form.name.value == '') {
document.form.name.value = 'your name';
}
}


This will also re-insert the "your name" if nothing is entered by the user.

abduraooft
10-03-2008, 05:15 PM
http://www.codingforums.com/showthread.php?t=131094 will help!

Bambam007
10-04-2008, 03:43 AM
Thank you Thank you Thank you
You are the best. Nice, clean code too - works with other events perfectly =]

Bambam007
10-04-2008, 03:43 AM
Just out of interest...

Say there were multiple text inputs with different values.
Would you need a set of the code for each one or is the a var option for that, like 'get the value'?
And at the same time only clear the current input rather than them all clearing at the one click...

abduraooft
10-04-2008, 08:07 AM
<script type="text/javascript">
function clearText(obj){
if(obj.value==obj.defaultValue) obj.value='';
}
function revert(obj){
if(obj.value=='') obj.value=obj.defaultValue;
}
</script>

<input type="text" name="name" size="20" maxlength="30" value="Name"
onfocus="clearText(this);"
onblur="revert(this);" />
<input type="text" name="mail" size="20" maxlength="30" value="Mail"
onfocus="clearText(this);"
onblur="revert(this);" />

PS: If you wish, you could delete your comments in the other thread, by clicking the "edit" button and then "delete"

Bambam007
10-04-2008, 02:11 PM
Well that was much tinier than i was thinking!
Brilliant!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum