用方向键和回车键切换成组文本框的焦点

一组单行文本框，用上下方向键可切换输入焦点，输入完回车也可切换至下一个文本框。

定义一组文本框：

<div id="textbox">
    <div><input type="text"></div>
    <div><input type="text"></div>
    <div><input type="text"></div>
    <div><input type="text"></div>
</div>

监听 keydown 事件，如果是上方向键（38）、下方向键（40）或回车键（13）就切换输入焦点。

<script>
document.getElementById("textbox").addEventListener("keydown", function(ev) {
    var e = ev||event;
    var key = e.keyCode||e.which;
    if(key!=13 && key!=40 && key!=38) return;
    var all = this.getElementsByTagName("input");
    var element = e.target||e.srcElement;
    var i;
    for(i=0; i<all.length; i++){
        if(element===all[i]){
            break;
        }
    }
    if((key==13||key==40) && i!=all.length-1){
        all[i+1].focus();
    }else if(key==38 && i!=0){
        all[i-1].focus();
    }
}, false);
</script>

本例利用了事件冒泡原理，把监听绑定在了容器标签上。利用 keyCode（火狐为which）获取键盘码，用 target（IE为srcElement）获取发生事件的文本框，如果是下方向键或回车键且不是最后一个控件，则为下一个文本框设置焦点；如果是上方向键且不是第一个文本框，则为上一个文本框设置焦点。