Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts

    focus only if...

    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
    Code:
    <input type="text" size="30" maxlength="50" name="name" value="your name" onfocus="referfocus();">
    here is the Javascript
    Code:
    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

  • #2
    New Coder
    Join Date
    Feb 2005
    Posts
    97
    Thanks
    7
    Thanked 7 Times in 7 Posts
    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)

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

    Code:
    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.

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    97
    Thanks
    7
    Thanked 7 Times in 7 Posts
    Aah, then we really where barking up the wrong tree. Try this.

    Code:
    <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.

    Code:
    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.

  • Users who have thanked mattyod for this post:

    Bambam007 (10-16-2008)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you Thank you Thank you
    You are the best. Nice, clean code too - works with other events perfectly =]

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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...
    Last edited by Bambam007; 10-04-2008 at 04:46 AM.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <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>
    Code:
    <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"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Bambam007 (10-16-2008)

  • #9
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Well that was much tinier than i was thinking!
    Brilliant!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •