-1

我需要你的帮助，

如何修改下面的 JavaScript 编码，使单击 [↓] 显示可用选项时输入框中的背景颜色不会取消阴影。两个元素（输入/选择）应该取消阴影的唯一时间是，如果用户通过单击页面中的某个其他元素完全移除两个元素的焦点。

用这个挠头：

<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 标记中：

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

1 回答 1

0

仅当输入处于焦点时才更改背景颜色。但是，选择下拉箭头意味着输入将失去焦点（一次只能有一个元素获得焦点）。您需要收听输入上的焦点事件并选择以获得我认为您想要的效果。

于 2013-09-20T15:51:03.593 回答