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
    Sep 2011
    Posts
    183
    Thanks
    139
    Thanked 0 Times in 0 Posts

    Focus and Keeping background colors of input/select box

    Hello,

    I really need the help of an expert.

    How can the JavaScript coding below be modified such that the background color in the input box won't unshade when the [↓] is clicked to display the avaliable options. The only time that both elements (input/select) should unshade, is if the user removes focus from both elements entirely by clicking on some other element in the page.

    Scratching my head with this one, (no more hair left):

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script type="text/javascript">
    window.onload = function() {
    
    var focused
    
    var select = document.getElementById('refdocs_select')
    
    var input = document.getElementById('refdocs_input')
    
    	input.attachEvent (
    		"onfocus",
    		
    		function () {
    			input.style.backgroundColor = '#FFFFC4'
    			select.style.backgroundColor = '#FFFFC4'
    			focused = true
    			alert(focused)
    		});
    	
    	input.attachEvent (
    		"onblur",
    		
    		function () {
    			input.style.backgroundColor = '#FFFFFF'
    			select.style.backgroundColor = '#FFFFFF'
    			focused = false
    		});
    	
    	select.attachEvent (
    		"onfocus",
    		
    		function () {
    
    			if (focused == true) { alert("input is still focused") }
    
    		});
    	
    	
    	
    	
    
    }//end function
    </script>
    
    </head>
    
    <body>
    <div id="refdocs_wrapper">
    <input id="refdocs_input" type="text"><select id="refdocs_select"> 
        <option value=""></option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
        <option value="GHI">GHI</option>
        <option value="JKL">JKL</option>
        <option value="MNO">MNO</option>
    </select>
    </div>
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    it should look more like this ...

    Code:
     
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
    var select = document.getElementById('refdocs_select')
    var input = document.getElementById('refdocs_input')
     input.attachEvent (
      "onfocus",
      
      function () {
       input.style.backgroundColor = '#FFFFC4'
       select.style.backgroundColor = '#FFFFC4'   
      });
     
     input.attachEvent (
      "onblur",
      
      function () {   
       input.style.backgroundColor = '#FFFFFF'
       select.style.backgroundColor = '#FFFFFF'   
      });
     
     select.attachEvent (
      "onfocus",  
      function () {
       input.style.backgroundColor = '#FFFFC4'
       select.style.backgroundColor = '#FFFFC4'
      }
     );
     
     select.attachEvent (
      "onblur",  
      function () {   
       input.style.backgroundColor = '#FFFFFF';
       select.style.backgroundColor = '#FFFFFF';      
      }
     );
     
     
    }//end function
    </script>
    </head>
    <body>
    <div id="refdocs_wrapper">
    <input id="refdocs_input" type="text"><select id="refdocs_select"> 
        <option value=""></option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
        <option value="GHI">GHI</option>
        <option value="JKL">JKL</option>
        <option value="MNO">MNO</option>
    </select>
    </div>
    </body>
    </html>
    Last edited by DaveyErwin; 09-20-2013 at 08:39 PM.

  • Users who have thanked DaveyErwin for this post:

    jason_kelly (09-20-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    183
    Thanks
    139
    Thanked 0 Times in 0 Posts
    Flawless work!

    Thanks so much Davey =)

    Cheers and have an awesome day!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    attachEvent() is only for IE. You need to use addEventListener() for other browsers.

  • Users who have thanked glenngv for this post:

    jason_kelly (09-27-2013)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    And that can be solved via pure CSS using the :focus pseudo-class, without any Javascript.

    Code:
    #refdocs_input, #refdocs_select {
        background-color: #FFF;
    }
    
    #refdocs_input:focus, #refdocs_select:focus {
        background-color: #FFFFC4;
    }

  • The Following 2 Users Say Thank You to glenngv For This Useful Post:

    jason_kelly (09-27-2013), sunfighter (09-21-2013)


  •  

    Posting Permissions

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