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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2002
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    input field bgcolor change method Q

    I've made it so that when you click inside the input field the background changes color. What i want to know is if this is the best way to do it or if i should use a sfunction etc.

    at the moment:

    Code:
    <input type="text" name="name" size="14" class="npt" onFocus="this.style.backgroundColor='#FFFFFF';" onBlur="this.style.backgroundColor='#F0F0F0';">

    it works but is there a better way

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well to make updating easier, like if you decide to change the color why not use className?

    Code:
    <style>
    .npt {
      background-color:#F0F0F0;
    }
    
    .inputFocus {
      background-color:#FFFFFF;
    }
    </style>
    <input type="text" name="name" size="14" class="npt" onFocus="this.className='inputFocus';" onBlur="this.className='npt';">
    You also get the added advantage of not having to type so much.
    The same goes for if you were using a function.

    Code:
    <script language="javascript">
    function changeBgColor(theField) {
    theField.style.backgroundColor = '#FFFFFF';
    }
    
    function changeBgBack(theField) {
    theField.style.backgroundColor = '#F0F0F0';
    }
    </script>
    <input type="text" name="name" size="14" class="npt" onFocus="changeBgColor(this)" onBlur="changeBgBack(this)">
    Both ways have good and bad points but I think that they even out.
    Go for one of those ways though, the first way you were using would be just consuming to much time if you have a large number of fields.
    Omnis mico antequam dominus Spookster!

  • #3
    New Coder
    Join Date
    Dec 2002
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    O.k


  •  

    Posting Permissions

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