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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Javascript/getElementById question

    I would like to recreate the following onFocus/onBlur class change using getElementById but I am not sure how to. Can anyone help me? Any help is greatly appreciated.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <
    html>
    <
    head>
    <
    title></title>

    <
    style>
    .
    search-input-off {
        
    padding1px 1px 1px 2px;
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
    }
    .
    search-input-on {
        
    padding1px 1px 1px 2px;
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
        
    background-color#FFFFE1;
    }
    #search-button {
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    font-weightbold;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
        
    background-color#EEE;
    }
    </
    style>
    </
    head>

    <
    body>

    <
    form>
    <
    input type="text" class="search-input-off" 
    onFocus="className='search-input-on';" onBlur="className='search-input-off';">

    <
    input type="submit" value="Search" id="search-button">
    </
    form>

    </
    body>
    </
    html

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    24
    Thanks
    0
    Thanked 4 Times in 4 Posts
    This is an example of your script using getElementById
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <
    html>
    <
    head>
    <
    title></title>

    <
    style>
    .
    search-input-off {
        
    padding1px 1px 1px 2px;
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
    }
    .
    search-input-on {
        
    padding1px 1px 1px 2px;
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
        
    background-color#FFFFE1;
    }
    #search-button {
        
    font-familyarialsans serif;
        
    font-size11px;
        
    color#444;
        
    font-weightbold;
        
    border-top1px solid #BBB;
        
    border-bottom1px solid #444;
        
    border-left1px solid #BBB;
        
    border-right1px solid #444;
        
    background-color#EEE;
    }
    </
    style>
    <
    script type="text/javascript">
    function 
    Focus()
    {
        
    document.getElementById('text').className 'search-input-on';
    }

    function 
    Blur()
    {
        
    document.getElementById('text').className 'search-input-off';
    }
    </script>

    </head>

    <body>

    <form>
    <input type="text" id="text" class="search-input-off" 
    onFocus="Focus();" onBlur="Blur();">

    <input type="submit" value="Search" id="search-button">
    </form>

    </body>
    </html> 

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You could also possibly just add this to the events


    <input type="text" class="search-input-off" onFocus="this.className='search-input-on';" onBlur="this.className='search-input-off';">
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thanks!

    Is there any benefit to use getElementById in place of this.className?

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Is there any benefit to use getElementById in place of this.className?
    I don't think so in this instance
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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