ASP ListView文本框方向键切换异常：左箭头有效右箭头无效

我一眼就看出问题出在右箭头的边界处理上——你只实现了左箭头从第一个输入框跳转到最后一个的循环逻辑，却漏掉了右箭头从最后一个输入框跳回第一个的场景，所以Textbox4按右箭头没反应。来看看修正后的代码和细节解释：

修正后的完整代码 #

$('input[type="text"],textarea').keydown(function (e) {
    // 兼容不同浏览器的按键码获取方式
    var key = e.keyCode || e.charCode || 0;
    // 获取所有需要参与切换的输入框集合
    var inputs = $('input[type="text"],textarea');
    // 当前输入框在集合中的索引位置
    var currentIndex = inputs.index(this);
    
    // 处理左箭头（←）：循环切换到前一个/最后一个输入框
    if (key === 37) {
        var targetIndex = currentIndex === 0 ? inputs.length - 1 : currentIndex - 1;
        inputs.eq(targetIndex).focus();
        e.preventDefault(); // 阻止文本框内光标左移的默认行为
    }
    
    // 处理右箭头（→）：新增循环逻辑，最后一个输入框跳回第一个
    if (key === 39) {
        var targetIndex = currentIndex === inputs.length - 1 ? 0 : currentIndex + 1;
        inputs.eq(targetIndex).focus();
        e.preventDefault(); // 阻止文本框内光标右移的默认行为
    }
});

关键修正点 #

• 右箭头循环逻辑补全：新增了currentIndex === inputs.length - 1的判断，当处于最后一个输入框（Textbox4）时，将目标索引设为0（Textbox1），完美实现循环切换。
• 代码简化优化：用三元表达式替代冗余的if-else结构，逻辑更清晰易读。
• 浏览器兼容性：统一按键码的获取方式，适配不同浏览器的事件对象差异。
• 默认行为拦截：每个方向键处理都加上e.preventDefault()，避免文本框内光标移动的默认行为干扰切换效果。

动态场景适配（如果ListView是动态生成输入框） #

如果你的ListView是分页加载或动态渲染的，直接绑定事件会导致新生成的输入框没有切换功能，建议使用事件委托来绑定：

$(document).on('keydown', 'input[type="text"],textarea', function (e) {
    var key = e.keyCode || e.charCode || 0;
    var inputs = $('input[type="text"],textarea');
    var currentIndex = inputs.index(this);
    
    if (key === 37) {
        var targetIndex = currentIndex === 0 ? inputs.length - 1 : currentIndex - 1;
        inputs.eq(targetIndex).focus();
        e.preventDefault();
    }
    
    if (key === 39) {
        var targetIndex = currentIndex === inputs.length - 1 ? 0 : currentIndex + 1;
        inputs.eq(targetIndex).focus();
        e.preventDefault();
    }
});

内容的提问来源于stack exchange，提问作者Robert