0

onblurおよびonfocusをテキストボックスと選択ボックスに適用するように、以下のコードをどのように変更できますか？現在、テキストボックスでのみ機能し、選択ボックスに適用できないようです。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

window.onload = 

function fnOnLoad() {
        var t = document.getElementsByTagName('INPUT');

        var i;
        for(i=0;i<t.length;i++)
        {
            //alert(t[i].type)

            if(t[i].type == "text")
            {
                t[i].attachEvent('onfocus', new Function("fnTXTFocus('"+t[i].id+ "')"));
                t[i].attachEvent('onblur', new Function("fnTXTLostFocus('"+t[i].id+ "')"));
            }
        }
    }


function fnTXTFocus(varname) {

        var objTXT = document.getElementById(varname)
        objTXT.style.backgroundColor = "#FFFF80";

    }

    function fnTXTLostFocus(varname)
    {
        var objTXT = document.getElementById(varname)
        objTXT.style.backgroundColor = "#FFFFFF";
    }


</script>


</head>
<body>

<input id="t1" type="text" >
<input id="t2" type="text" >
<input id="t3" type="text" >
<br><br>
<select size="d1" ></select>
<select size="d2" ></select>
<select size="d3" ></select>
<p>When the input field gets focus, 
   a function is triggered which changes the background-color.</p>

</body>
</html>
4

3 に答える 3

0

これを試して：

function fnOnLoad() {
    var inputs = document.getElementsByTagName('INPUT');
    for(var i = 0; i < inputs.length; i++)
    {
        inputs[i].attachEvent('onfocus', function(){ 
             this.style.backgroundColor = "#FFFF80";
        });
        inputs[i].attachEvent('onblur', function(){ 
             this.style.backgroundColor = "#FFFFFF";
        });
    }

    var selects = document.getElementsByTagName('SELECT');
    for(var i = 0; i < selects.length; i++)
    {
        selects[i].attachEvent('onfocus', function(){ 
             this.style.backgroundColor = "#FFFF80";
        });
        selects[i].attachEvent('onblur', function(){ 
             this.style.backgroundColor = "#FFFFFF";
        });
    }
}

window.onload = fnOnLoad;
于 2012-10-16T17:24:09.380 に答える
0

したがって、実行する必要があるのは、すべての選択を取得して、イベントハンドラーをそれらにアタッチすることです。

var s = document.getElementsByTagName('SELECT');
于 2012-10-16T17:24:09.770 に答える
-1 
<script type="text/javascript">

function fnOnLoad() {

    var t = document.getElementsByTagName('INPUT');
    for (var i = 0; i < t.length; i++) {
            t[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4';};
            t[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

    var d = document.getElementsByTagName('SELECT');
    for (var i = 0; i < d.length; i++) {
            d[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
            d[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

}
</script>
于 2012-10-16T18:50:49.223 に答える