javascript - 在每个选择标签上添加 onfocus、onblur 和 onchange

Question

我想添加到页面中的每个选择标签，例如:

onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'

在头部使用js。

我尝试过:

<script>
// onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'

var sels = document.getElementsByTagName("select");
for(var i=0; i<sels.length;i++){
    sels[i].onfocus=function() {
        sels[i].setAttribute("size","10"); 
    }
    sels[i].onblur=function() {
        sels[i].setAttribute("size","1"); 
    }
    sels[i].onchange=function() {
        sels[i].setAttribute("size","1");
        sels[i].blur();
    }
}
</script>

这不起作用。你能帮助我吗？谢谢。

Answer 1

您可以使用this引用当前选择元素:

var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
    sels[i].onfocus = function () {
        this.setAttribute("size", "10");
    }
    sels[i].onblur = function () {
        this.setAttribute("size", "1");
    }
    sels[i].onchange = function () {
        this.setAttribute("size", "1");
        this.blur();
    }
}

演示:http://jsfiddle.net/7Zrnw/

或者您可以使用立即函数将当前索引 i 值存储到闭包中。否则，到事件发生时，i 等于 sels.lenght 并且 sels[i] 未定义。

var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
    (function(i) {
        sels[i].onfocus=function() {
            sels[i].setAttribute("size","10"); 
        }
        sels[i].onblur=function() {
            sels[i].setAttribute("size","1"); 
        }
        sels[i].onchange=function() {
            sels[i].setAttribute("size","1");
            sels[i].blur();
        }
    })(i);
}