SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Input onFocus with a global script

    I really like the effect of using onBlur and onFocus for text-fields, and onMouseover and onMouseout, like so:
    Code:
     <label for="email">Email Address:</label><input class="form-text" id="email" name="email" onfocus="this.style.backgroundColor='#ccc';" onblur="this.style.backgroundColor='#E8E8E8';" /><br />
     <p class="center"><input class="button" type="submit" value="Submit Information" onmouseover="this.style.backgroundColor='#ccc';" onmouseout="this.style.backgroundColor='#E8E8E8';" /></p>
    See it live on (http://swve.deanforamerica.com)

    In fact, I like it so much that I want that effect for every input on my site. Problem is the CMS can't be edited to include this in every input tag. Is there a JS I can include that will take every input and add the onFocus/onBlur if it is class "form-text", and onmousever/onmouseout for class "button">

    If that isn't possible, what about just the onFocus/onBlur for all inputs?

    I don't really know JS, but it seems to me that this should be possible. 30 minutes of SitePoint and Google searching hasn't turned up anything, so perhaps it's not.

    Any help would be appreciated.

    Cameron
    Last edited by CameronCorda; Jan 5, 2004 at 05:07.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think this works...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <script type="text/javascript">
    
    onload = function()
    {
    	var  e, f = 0, this_input, all_inputs, this_form, all_forms = document.getElementsByTagName('form');
    	while (this_form = all_forms.item(f++))
    	{
    		all_inputs = this_form.getElementsByTagName('input'), e = 0;
    		while (this_input = all_inputs.item(e++))
    			if (this_input.className == 'form-text')
    			{
    				this_input.onfocus = function()
    				{
    					this.style.background = '#ccc';
    				}
    				this_input.onblur = function()
    				{
    					this.style.background = '#e8e8e8';
    				}
    			}
    			else if (this_input.className == 'button')
    			{
    				this_input.onmouseover = function()
    				{
    					this.style.background = '#ccc';
    				}
    				this_input.onmouseout = function()
    				{
    					this.style.background = '#e8e8e8';
    				}
    			}
    	}
    }
    
    </script>
    </head>
    <body>
    <form>
    <label for="email">Email Address:</label><input class="form-text" id="email" name="email" /><br />
    <label for="bla">Bla:</label><input id="bla" name="bla" value="no focus!" /><br />
    <label for="foo">Foo:</label><input class="form-text" id="foo" name="foo" /><br />
    <p class="center"><input class="button" type="submit" value="Submit Information" /></p>
    <p class="center"><input class="nobutton" type="button" value="No Rollover" /></p>
    </form>
    <form>
    <label for="email">Email Address:</label><input class="form-text" id="email" name="email" /><br />
    <p class="center"><input class="button" type="submit" value="Submit Information" /></p>
    </form>
    </body>
    </html>
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Adios.

    It seems to work when only using the code you gave. Witness http://ca.deanforamerica.com/jstest.htm

    However, when I use it on my site, I don't get any errors, but don't get the blur/focus effect either. Witness http://ca.deanforamerica.com

    I'm wondering if the problem comes from those input's being nested deeper in the site or something.

    Any ideas?

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You Dean guys are so temperamental...

    Apologies, should have been more careful here...this assigns an [window.]onload handler:
    Code:
    onload = function()
    {
    ...........
    ...........
    Unfortunately - so does this (from your site):
    Code:
    <body onload="initMenus();">
    ...over-writing the first one. You'll need to combine them. Easiest way: change this:
    Code:
    onload = function()
    {
    ...to:
    Code:
    function initForms()
    {
    	var  e, f = 0, this_input, all........
    ...and add the following to the script in the <head>:
    Code:
    onload = function()
    {
    	initMenus();
    	initForms();
    }
    
    </script>
    Don't forget to remove that <body onload="initMenus();"> business.

    Good luck....with everything
    ::: certified wild guess :::

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use javascript when a few lines of CSS will do?
    Code:
    input.form-text, input.button {background-color:#e8e8e8;}
    input.button:hover, input.form-text:focus {background-color:#ccc;}
    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use javascript when a few lines of CSS will do?
    Maybe because some of his users - 94% or so - will be using Internet Explorer.
    ::: certified wild guess :::

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, you are right of course.

    Guess I momentarily forgot about that particular deficiency of IE.

    Can you blame me? Their are so many!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


Bookmarks

Posting Permissions

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