Question

Javascript获取按键＆＃34;输入＆＃34;输入类型文本上的事件

我有3个文本输入，1个下拉列表和10行。

对于3文本输入，第1行将具有_1的标识符，对于第2行，第1行将具有_2的标识符。

我想要实现的目标是：

Textfield1 ------>   left_1
Textfield2 ------>   center_1
Textfield3 ------>   right_1
DropdownList ---->   dd_1

当我在left_1上按Enter键时，我想将输入事件更改为＆＃34; tab＆＃34;至center_1，如果我在center_1输入活动，则会标记为right_1。

如果我在right_1输入活动，则会转到下一行left_2。

如果您按下＆＃34;标签＆＃34;通常会出现问题在right_1，它将重点关注dd_1

下一个关键问题是，我在表单中有一个提交按钮，如果我按任何一个表单输入，它将只提交表单。我尝试使用检查事件代码禁用输入并阻止默认但是这样做，我仍然无法更改我的输入以关注文本字段，如上所述

JsFiddle on my Question

我需要在输入时第一行的最后一个输入处转到第2行。

Answer 1

对于标签导航，我建议转到tabindex

您的问题似乎有两种聚焦输入元素的模式。

通过回车键
通过tab键

正如我已经建议的那样，留在tabindex

为了避免在输入密钥和您的＃2用例上提交表单，下面的方法将完成工作

$(function () {
    $("form :input").on("keypress", function (e) {
        var nextIndex = $(this).prop('tabindex') + 1; // from above answer
        $('[tabindex=' + nextIndex + ']').focus();
        return e.keyCode != 13;  // this will ensure to prevent form submit
    });
});

JSFiddle

Answer 2

使用tabindex属性：

http://www.w3.org/WAI/UA/TS/html401/cp0101/0101-TABINDEX.html

并更新您的脚本以使用它的值导航：

    var nextIndex = $(this).prop('tabindex') + 1;
    $('[tabindex=' + nextIndex + ']').focus();

完整示例：

http://jsfiddle.net/kL2ntc2u/7/

Answer 3

如果你想像现在这样做。你可以调整一些javascript。

if(e.keyCode == "13"){     
   var id = $(this).attr('id');
   if(id.indexOf("right") > -1){
       var number = id.split('_')[1];
       number++;
       $("#left_"+number).focus();
    }else{
        $(this).next().focus();
    }            
}

http://jsfiddle.net/mko1hght/

Javascript在表单上输入提交到选项卡

3 个答案: