下拉菜单的阴影颜色并在焦点/模糊上选择答案

【问题标题】：Shade Color of Dropdown and Select on focus/onblur下拉菜单的阴影颜色并在焦点/模糊上选择
【发布时间】：2012-10-06 20:58:42
【问题描述】：

如何修改下面的代码，以便将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>

【问题讨论】：

new Function(...) 部分是什么？为什么需要这样做？！

标签： javascript html drop-down-menu onfocus dropdownbox

【解决方案1】：

试试这个：

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;

【讨论】：

我感觉它会起作用，但它返回错误消息：“第 14 行：inputs[...].style is null or not an object”
同样的交易尼尔，这次是“第 14 行：'this.style' 为空或不是对象。据我所知，代码应该没问题。不知道为什么它不起作用.. ..
@JasonKelly 不知道。你能对你的问题做一个有效的演示吗？
@JasonKelly 你用的是什么浏览器？

【解决方案2】：

因此，您还需要获取所有选择并将事件处理程序附加到它们：

var s = document.getElementsByTagName('SELECT');

【讨论】：

【解决方案3】：

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

【讨论】：