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
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Clear input box issue

    I dont know if this is a coding or browser based issue (FF 3.6) but when i click on a input box i want it to clear its current default value, that works, but when i refresh my browser the default value doesn't come back, here's what i have.

    Code:
    function clearMe(theText) {
    	
         if (theText.value == theText.defaultValue) {
             theText.value = ""
         }
     }
    
    
    <input type="text" name="searchBar" id="searchBar" value="Search Here" onblur="restoreMe(this)" onclick="clearMe(this)" />
    Anyone able to help me sort this?

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I must say i have never used defaultValue before (because if it does exist, i didn't know) but I use the following script to blank an input default.

    Code:
    <input name="<nameofobject>" value="<defaultvalue>" onfocus="defaultkill(this.form.<nameofobject>,'<defaultvalue>')" />
    and use the following code (the color thing is because my defaults load as color #666)

    Code:
    defaultkill(objname,a) 
    {
    	if(objname.value == a)
    	{
    		objname.value="";
    		objname.style.color="#000";
    	}
    }
    This works well for me.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    The code was just a template i found on a website, i redid it and came up with this which works fine for me.

    Code:
    function clearMe(theText) {
    	
         if (theText.value == 'Search Here') {
             theText.value = ""
         }
     }
    
    function restoreMe(theText) {
    	
     
         if (theText.value.length == 0) {
             theText.value = "Search Here"
         }
            
     } 
    
    
    <input type="text" name="searchBar" id="searchBar" value="Search Here" onblur="restoreMe(this)" onclick="clearMe(this)" />

  • Users who have thanked tomharto for this post:

    xelawho (06-28-2011)

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,922
    Thanks
    56
    Thanked 548 Times in 545 Posts
    thanks, Tomharto - I've been looking around everywhere for something like this, but the closest I got was one where it cleared whatever text was in the input every time you clicked in there (very annoying).

    Here's my meager contribution: I like to have the default text gray, but the input text black (like the search box on this page), which you can do like this:

    Code:
    <input type="text" name="searchBar" id="searchBar" value="Search Here" style="color:#999999" onblur="restoreMe(this)" onclick="clearMe(this), this.style.color='#000000'" />

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,922
    Thanks
    56
    Thanked 548 Times in 545 Posts
    ... although I notice that if you tab on to another window and then go back, the text reverts to black. This seems to be a neater solution:

    Code:
    function searchfield_focus(obj)
    {
    obj.style.color=""
    obj.style.fontStyle=""
    if (obj.value=="Search Here")
    	{
    	obj.value=""
    	}
    }
    
    
    <input type="text" name="searchBar" id="searchBar" value="Search Here" style="color:#999999" onfocus="searchfield_focus(this)"/>"

  • #6
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    The code I posted above should also resolve that error and below I have added a restore function applied to the onblur event.

    i would try to avoid using an inline code like...

    Code:
    onclick="clearMe(this), this.style.color='#000000'"
    using functions and if statements will ensure whatever you have done is not instantly undone.

    Quote Originally Posted by LSCare View Post
    Code:
    <input name="<nameofobject>" value="<defaultvalue>" onfocus="defaultkill(this.form.<nameofobject>,'<defaultvalue>')" onblur="defaultrestore(this.form.<nameofobject>,'<defaultvalue>')"  />
    
    defaultkill(objname,a) 
    {
    	if(objname.value == a)
    	{
    		objname.value="";
    		objname.style.color="#000";
    	}
    }
    
    // added for the restore function
    
    defaultrestore(objname,a) 
    {
    	if(objname.value.length == 0)
    	{
    		objname.value=a;
    		objname.style.color="#666";
    	}
    }
    Last edited by LSCare; 06-28-2011 at 04:39 PM. Reason: error in forum code

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Personally i styled the color and everything for my input in a CSS sheet and the colour is always correct for me.


    Code:
    #<TheIdForYourInput> {
    	-moz-border-radius:0em 1em 1em 0em;
    	color:#999;
    	height:25px;
    	padding-left:5px;	
    	background-color:#efeeee;
    	border:solid 1px #f68a1f;
    	border-left:none;
    }
    Last edited by tomharto; 06-28-2011 at 05:12 PM.

  • #8
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I'm only referring to changing a colour using javascript.

    of course it is sensible to style stuff using a style sheet but if you want to change a colour it is always safer to do so in an IF statement. So that it only happens when you want it to.

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Oh, sorry i thought you meant the color was being buggy and randomly changing


  •  

    Posting Permissions

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