Question

我需要你的帮助，

如何修改下面的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>

Answer 1

您只是在输入处于焦点时更改背景颜色。但是，选择下拉箭头表示输入是OUT焦点（只有一个元素可以同时具有焦点）。您需要在输入上听取焦点事件并选择以获得我认为您想要的效果。

单击下拉列表时，请勿在可编辑选择框中更改背景颜色

1 个答案: