Background colors and editable selectbox

**jason_kelly** · 09-20-2013, 04:05 PM

Hello,

I need your help,

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:

Code:

<script type="text/javascript">
    var shade = "yellow"
    var unshade = "white"

    window.onload = function() {
            var x = document.getElementsByTagName('INPUT')

                for (var i = 0; i < x.length; i++) {                

                    if (x[i].readOnly == false) {

                        if (x[i].id == "refdocs_input") {

                            x[i].onfocus = function() { 
                                    this.style.backgroundColor = shade
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = shade
                                    document.getElementById('refdocs_select').style.backgroundColor = shade
                            }//end function

                            x[i].onblur = function() {
                                    this.style.backgroundColor = unshade
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = unshade
                                    document.getElementById('refdocs_select').style.backgroundColor = unshade
                            }//end function
                        }//end if

                    }//end if

                }//end for
    }
</script>

HTML MARKUP:

Code:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#refdocs_select { 
    left: expression(this.previousSibling.offsetLeft); 
    width: expression(this.previousSibling.offsetWidth);  
    clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
    overflow: hidden;
    position: absolute;
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#refdocs_wrapper {
    border: 1px solid rgb(128,128,128);
    display: block;
    position: relative;
    width: 180px;
    height: 20px;
}
#refdocs_input {
    border: 0;
    height: 18px;
    width: 180px;
    position: relative;
    font-size: 9pt;
    font-family: Arial;
    padding: 2px;
}
</style>

</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>

**jscheuer1** · 09-21-2013, 07:11 AM

You don't seem to say whether or not both of them should be highlighted when neither is and the select is focused. Assuming that's a 'yes', then:

Code:

<script type="text/javascript">
    var shade = "yellow";
    var unshade = "white";

    window.onload = function() {
            var x = document.getElementsByTagName('INPUT');

                for (var i = 0; i < x.length; i++) {                

                    if (!x[i].readOnly) {

                        if (x[i].id == "refdocs_input") {

                            x[i].onfocus = document.getElementById('refdocs_select').onfocus = function() {
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = shade;
                                    document.getElementById('refdocs_select').style.backgroundColor = shade;
                                    document.getElementById('refdocs_input').style.backgroundColor = shade;
                            }//end function

                            x[i].onblur = document.getElementById('refdocs_select').onblur = function() {
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = unshade;
                                    document.getElementById('refdocs_select').style.backgroundColor = unshade;
                                    document.getElementById('refdocs_input').style.backgroundColor = unshade;
                            }//end function
                        }//end if

                    }//end if

                }//end for
    }
</script>

**jason_kelly** · 09-23-2013, 06:18 PM

Wow!

I am again both floored and amazed at your talent and wisdom on this forum. I can't simply thank you enough for all of this. One of the best around here. Again, thank you so much, you coding is working flawlessly!.

Cheers and have a much brighter and awesome day!

Jay

**jason_kelly** · 09-23-2013, 06:38 PM

Hi John,

Im noticing that I am having to click drop down twice to get the selectbox focus. Is there anyway to circumvent the need for a double click?

Jay

**jscheuer1** · 09-23-2013, 06:57 PM

I noticed that too, but only in IE. I tried various ways to get around it, but nothing worked. I checked and it was like that before, with the code in your first post, so I decided not to worry about it.

**jscheuer1** · 09-23-2013, 07:10 PM

Wait, looking at it again, this seems to work:

Code:

<script type="text/javascript">
    var shade = "yellow";
    var unshade = "white";

    window.onload = function() {
            var x = document.getElementsByTagName('INPUT'), y = document.getElementById('refdocs_select'), hlighted;

                for (var i = 0; i < x.length; i++) {                

                    if (!x[i].readOnly) {

                        if (x[i].id == "refdocs_input") {

                            x[i].onfocus = y.onmousedown = y.onfocus = function() {
                            	    if(hlighted){return;}
                            	    hlighted = true;
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = shade;
                                    document.getElementById('refdocs_select').style.backgroundColor = shade;
                                    document.getElementById('refdocs_input').style.backgroundColor = shade;
                                    setTimeout(function(){hlighted = false;}, 100);
                            }//end function

                            x[i].onblur = y.onblur = function() {
                            	    if(hlighted){return;}
                                    document.getElementById('refdocs_wrapper').style.backgroundColor = unshade;
                                    document.getElementById('refdocs_select').style.backgroundColor = unshade;
                                    document.getElementById('refdocs_input').style.backgroundColor = unshade;
                            }//end function
                        }//end if

                    }//end if

                }//end for
    }
</script>

**jason_kelly** · 09-24-2013, 01:00 PM

Thanks very much John. It worked like a charm. Some really good logic here at play

**jscheuer1** · 09-24-2013, 01:57 PM

Now that it's working, I've been wondering why it goes through all that trouble in finding refdocs_input, it can be found right away with:

Code:

document.getElementById('refdocs_input')

If it's only a matter of whether or not the element exists and isn't read only, you can do:

Code:

var refdocsInput = document.getElementById('refdocs_input');
if(refdocsInput && !refdocsInput.readOnly){
 . . .

I guess the way it's done insures that not only it exists, but also that it is an input tag. Generally that could be assumed or tested in another way though.