Log in

View Full Version : 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:



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


<!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:


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


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


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:


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.