JavaScript表单按回车及方向键切换输入焦点

实现原理与核心逻辑

该功能主要包含三个核心部分：按键识别、索引计算与焦点转移、以及默认行为拦截。

1. 按键识别：获取键盘事件的 keyCode。13 代表回车，37/38 代表左/上，39/40 代表右/下。根据这些码值判断用户的意图是“向下”还是“向上”移动焦点。
2. 索引计算：遍历当前表单内的所有元素（form.elements），找到当前获得焦点元素的索引位置。利用取模运算（%）处理循环逻辑，确保从最后一个元素按“下”会回到第一个，反之亦然。
3. 焦点转移：调用目标元素的 focus() 方法，并将内容选中（select()）以提高编辑效率。

第1步：构建基础 HTML 表单结构

首先准备一个包含多个文本输入框和提交按钮的表单，以便后续绑定脚本。

第2步：编写跨浏览器的事件添加工具

为了保证代码在旧版 IE 和新标准浏览器中均能运行，需要封装一个 addHandler 函数来统一处理 addEventListener 和 attachEvent。

function addHandler(element, type, handler) {
    if (element.addEventListener)
        element.addEventListener(type, handler, false);
    else if (element.attachEvent)
        element.attachEvent("on" + type, handler);
    else
        element["on" + type] = handler;
}

第3步：实现焦点切换核心逻辑

定义 handle_element 函数，它接收当前域对象和移动方向。通过循环定位当前索引，计算新索引后调用 focus()。特别处理了边界情况，防止焦点错误地停留在提交按钮等非输入区域导致异常。

function handle_element(field, isDown) {
    var elements = field.form.elements;
    // 查找当前字段在表单中的索引
    for (var i = 0, len = elements.length - 1; i < len; i++) {
        if (field == elements[i]) break;
    }
    
    // 计算新索引：向下则+1取模，向上则-1取模
    i = isDown ? (i + 1) % len : (i - 1) % len;
    
    // 处理边界回绕后的无效状态检查
    if ((0 === i && isDown) || (-1 === i && !isDown)) {
        return true;
    }
    
    // 设置焦点
    elements[i].focus();
    
    // 对特定类型元素（如button, textarea等）尝试选中内容
    var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
    if (element_arr.join(',').indexOf(elements[i].type) > -1) {
        elements[i].select();
    }
    return false;
}

第4步：绑定键盘事件并阻止默认提交

最后，遍历表单所有元素为其绑定 keyup 事件。同时在全局捕获键盘按下事件，若检测到回车键则阻止表单默认提交行为。

// 取消回车默认提交表单事件
document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == 13) {
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
};

// 初始化绑定
var elements = document.forms[0].elements;
for (var i = 0, len = elements.length; i < len; i++) {
    addHandler(elements[i], "keyup", key_up);
}

以上就是JavaScript实现按回车键及方向键切换表单焦点的详细内容，更多关于JavaScript表单交互的资料请关注本站其它相关文章！