#1
  1. No Profile Picture
    Certified Genius
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    over there
    Posts
    77
    Rep Power
    13

    javascript functions for textboxes


    i'm looking for a way to get text boxes to be a certain color when blurred and turn another color when they receive focus...i have many text boxes across many pages...is there a simple way to attach this behaviour to all the text boxes???
    Delenda est Carthago
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Note: this will over-write any onfocus/onblur handlers assigned via HTML; special treatment (easy enough) is needed if you want to preserve them. Took the easy road:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    input {
    background: #c0c0c0;
    }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    var focusColor = '#f0d0d0';
    var blurColor = '#c0c0c0';
    
    function hotbox() {
    var form, el, e, f = 0;
    while (form = document.forms[f++]) {
    e = 0;
    while (el = form.elements[e++]) if (el.type == 'text' && typeof el.style != 'undefined') {
    el.onfocus = new Function('this.style.background = "' + focusColor + '"');
    el.onblur = new Function('this.style.background = "' + blurColor + '"');
    }
    }
    }
    
    onload = hotbox;
    
    </script>
    </head>
    <body>
    <form>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
    </form><br><br>
    <form>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
    </form>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Certified Genius
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    over there
    Posts
    77
    Rep Power
    13

    you rule!


    adios for president!
    Delenda est Carthago
  6. #4
  7. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25

    conversion...


    Could anyone ammend this so it allows highlighting on text AND password fields please?
  8. #5
  9. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    Also... I just want the bg color to change. When I click on it, the border changes to indented and does not reset when I click off. Sorry to be a pain!
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    To handle passwords too, just change the typecheck statement:
    Code:
    // Change this...
    if (el.type == 'text' && typeof el.style != 'undefined')
    // ...to this.
    if (el.type == 'text' || el.type =='password' && typeof el.style != 'undefined')
    As for the border thing, it shouldn't happen, unless you have some other scripts working on the elements. Post your code and we'll see if we can spot anything.
  12. #7
  13. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    Ok, the password thing works thanks :-) - is the Border thing an XP problem? like, on XP text fields do not look indented if you know what I mean, but after clicking on them for highlighting they go back to being slightly indented.

    There are other scripts on the page, but on the form fields themselves its just:

    javascript:

    var focusColor = '#d1d1d1';
    var blurColor = '#ffffff';

    function hotbox() {
    var form, el, e, f = 0;
    while (form = document.forms[f++]) {
    e = 0;

    while (el = form.elements[e++]) if (el.type == 'text' || el.type =='password' && typeof el.style != 'undefined') {
    el.onfocus = new Function('this.style.background = "' + focusColor + '"');
    el.onblur = new Function('this.style.background = "' + blurColor + '"');
    }
    }
    }

    onload = hotbox;

    TABLE ROW:

    <tr>
    <td class="critical">Preferred User Name</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="userName" ID="Text1">
    </td>
    <td><a href="#" class="help">?</a></td>
    </tr>

    CSS:

    TD.critical
    {
    font-size:12px;
    color: Red;
    width:200px;
    }

    .registrationFormADDRESS
    {
    width:240px;
    height:18px;
    font-size:9px;
    }

    thanks again!
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    I dunno...I'll take a closer look this weekend when I'm at home and have an xp box in front of me. I never had a problem though when testing the code I provided...
  16. #9
  17. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    thanks MJEggertson I think its probably an XP thing. However, how can I edit the function to allow multiple styles to be applied? such as....

    el.onfocus = new Function('this.style.background = "' + focusColor + '"' + this.style.color = etc etc etc);

    and also - I want to tell it to be inline so that when hidden it does not take up any space.

    thanks again for all the help so far to all.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    I dunno. At home, on either of my XP boxes in Explorer, I get shadowed input boxes since the background property has been set.

    As for multiple style changes, yes, it's easy to do. Just modify the function to have multiple commands.
    Code:
    el.onfocus = new function(
      'this.style.background = "' + focusColor + '";'
      + 'this.style.border = "1px solid red";');
    Just use semicolons at end of commands, like you would in any javascript, and be extra careful with those nested quotes.
  20. #11
  21. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    25
    Thanks a lot for the multiple styles advice MJEggertson. As for the shadowed boxes. No-one else has reported a problem either so I have left it.

IMN logo majestic logo threadwatch logo seochat tools logo