Javascript在表单上输入Submit to Tab

Javascript Enter on Form Submit to Tab

本文关键字：Submit to Tab 输入 表单 Javascript      更新时间：2023-09-26

Javascript获取输入类型文本上的按键"Enter"事件

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

对于3个文本输入，第1行将具有标识符_1，对于第2行，下拉列表后面跟着_2。

我想要实现的是：

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

当我在left_1上按enter键时，我想将输入事件作为"选项卡"更改为center_1，而如果我在center_1上输入事件，它将选项卡更改为right_1。

如果我确实在right_1输入事件，它将转到下一行left_2。

问题通常是，如果您在right_1按下"tab"，它将聚焦到dd_1

下一个关键问题是，我在表单中有一个提交按钮，如果我在任何表单上按下回车键，它就会提交表单。我之前尝试过使用检查事件代码禁用回车，并阻止默认，但这样做，我仍然无法更改我的回车键，将焦点放在上面提到的文本字段上

JsFidle对我的问题

在输入时，我需要能够在第一行的最后一个输入处转到第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/

对于选项卡导航，我建议使用tabindex

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

  1. 通过回车键
  2. 通过制表键

正如我已经建议的，继续使用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

如果你想像现在这样做。您可以调整一些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/

相关文章：