-1

あなたの助けが必要です、

[↓] をクリックして使用可能なオプションを表示したときに、入力ボックスの背景色が消えないように、以下の JavaScript コーディングを変更するにはどうすればよいですか。両方の要素 (input/select) のシェーディングを解除する必要があるのは、ユーザーがページ内の他の要素をクリックして両方の要素から完全にフォーカスを外した場合のみです。

これで頭を悩ませます：

<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

入力がフォーカスされている場合にのみ、背景色を変更しています。ただし、ドロップダウン矢印を選択すると、入力がフォーカスされなくなります (一度に 1 つの要素のみがフォーカスされます)。入力のフォーカスイベントをリッスンし、希望する効果を得るために選択する必要があります。

于 2013-09-20T15:51:03.593 に答える