如何在 JavaScript 或 jQuery 中模拟按下 Enter 键时的 TAB 键切换功能

Question

我想在页面上的所有输入框中更改keydown（按键按下）中的按键码。我想用Tab键码替换Enter键码。我该如何实现？

谢谢。

---

编辑1）

考虑以下代码：

<div>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
    </asp:RadioButtonList>
    <br />
    <br />
    <asp:TextBox ID="TextBox1" runat="server">3333</asp:TextBox>
    <br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
    </asp:DropDownList>
</div>

我希望在用户在上述控件中按下回车键时，焦点能够转移到下一个控件。

谢谢

- Arian

---

你可以在https://dev59.com/iHNA5IYBdhLWcg3wVcFx找到类似的问题。 - Pavan

我认为值得注意的是，改变浏览器的默认行为通常不是一个好主意。这与用户按下键时期望发生的事情相反。 - Christofer Eliasson

这取决于你针对哪些用户，当然。如果你能够教育你的用户（例如，如果他们就在走廊里），那么它可能是一个非常好的工作流程改进。 - Joel Purra

Answer 1

我曾经遇到过类似的问题，我想按下数字键盘上的+键来切换到下一个字段。现在我发布了一个库，我认为它会对你有所帮助。

PlusAsTab：一个jQuery插件，可以使用数字键盘上的加号键作为tab键的等效键。

由于你想使用enter/↵键，因此你可以设置选项。通过jQuery event.which demo找出要使用的键。

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // https://api.jquery.com/event.which/
  key: 13
});

然后，通过在要使用enter-as-tab的表单字段或包含这些表单字段的其他元素中添加plus-as-tab="true"来启用此功能。单选按钮不应该是问题，因为它们已经被我的另一个库EmulateTab覆盖了-请参见该演示中单选按钮的自动导航。

<div plus-as-tab="true">
  <!-- all focusable elements inside the <div> will be enabled -->
  <asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <!-- Radio buttons should not be a problem. -->
  </asp:RadioButtonList>
</div>

您可以在PlusAsTab输入即Tab演示中自行尝试。

- Joel Purra

---

我喜欢你的插件Joel，但是当使用回车作为选项卡示例时，它似乎没有注意tabindex。:( - Ed DeGagne

@EdDeGagne：tabindex是被设计忽略的 - 请参见SkipOnTab versus tabindex。应该从PlusAsTab和EmulateTab编写类似的内容或链接到该页面。 - Joel Purra

Answer 2

这段代码是用来将回车替换为制表符的：

$("#wmd-input").bind("keypress", function(e) {
   if (e.keyCode == 13) {
      var input = $(this);
      var inputVal = input.val();
      setTimeout(function() {
        input.val(inputVal.substring(0,inputVal.length) + "\t");
      }, 1);
   }
});

演示

更新：

这段代码是用来将焦点放在下一个元素上的：

$(document).ready(function () {
    $("input,select").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            var allInputs = $("input,select");
            for (var i = 0; i < allInputs.length; i++) {
                if (allInputs[i] == this) {
                    while ((allInputs[i]).name == (allInputs[i + 1]).name) {
                        i++;
                    }

                    if ((i + 1) < allInputs.length) $(allInputs[i + 1]).focus();
                }
            }
        }
    });
});

- Abdul Munim

---

我猜我误解了问题。你的意思是在TAB键按下时关注其他元素吗？ - Abdul Munim

它不起作用。请查看我的编辑1。我希望焦点转到下一个控件。 - Arian

谢谢，但在单选按钮中，它会导致移动到每个类型为radio的输入。请参见此链接：http://jsfiddle.net/xjHvK/ - Arian

它对我有效，除了按下按钮时没有提交表单。 - bjan

Answer 3

希望这能够奏效。

$('input,textarea').keydown(function(){
  if(event.keyCode==13) {
    event.keyCode = 9;
  }
});

编辑

请尝试这个http://jsfiddle.net/GUmUg/。根据需要调整选择器以使其与asp兼容。

$('input,textarea').keypress(function(e){
    if(e.keyCode==13) {
   $(this).next().focus();
  }
});

- aWebDeveloper

---

@Web开发人员，第二个选项只有在下一个元素是输入而不是标签等其他内容时才有效... - MaVRoSCy

第一种解决方案（更改keyCode）不再起作用了。 :-( - Krisztián Balla

Answer 4

$('input').on('keydown',function(e){
    var keyCode = e.keyCode || e.which;
     if(e.keyCode === 13) {
      e.preventDefault();
      $('input')[$('input').index(this)+1].focus();
      }
});

请在此处查看示例：http://jsfiddle.net/Pd5QC/

- dku.rajkumar

Answer 5

我通常使用jQuery对您的选择进行遍历，并将焦点放在当前元素之后的元素上。

$(document).on('keyup', '.my-input', function (ev) {

    if (ev.keyCode == '13') {
        var currentInput = this;
        var isOnCurrent = false;

        $('.my-input').each(function () {

            if (isOnCurrent == true) {
                $(this).focus();
                return false;
            }

            if (this == currentInput) {
                isOnCurrent = true;
            }

        });
    }
});

- Jonathan

Answer 6

$(document).ready(function() {

//Objetos con CssClass="EntTab" sustituye el Enter (keycode 13) por un Tabulador (keycode 9)!!

    $(".EntTab").bind("keypress", function(e) {
        if (e.keyCode == 13) {
            var inps = $("input, select"); //add select too
            for (var x = 0; x < inps.length; x++) {
                if (inps[x] == this) {
                    while ((inps[x]).name == (inps[x + 1]).name) {
                        x++;
                    }
                    if ((x + 1) < inps.length) $(inps[x + 1]).focus();
                }
            } e.preventDefault();
        }
    });
});

- Jorge

Answer 7

我创建了一个简单的jQuery插件来解决这个问题。它使用jQuery UI的':tabbable'选择器来查找下一个'tabbable'元素并选择它。

示例用法：

// Simulate tab key when enter is pressed           
$('.myElement').bind('keypress', function(event){
    if(event.which === 13){
        if(event.shiftKey){
            $.tabPrev();
        }
        else{
            $.tabNext();
        }
        return false;
    }
});

- Mark Lagendijk

Answer 8

我认为这个可以工作：

 $('input').live("keypress", function (e) {
        /* ENTER PRESSED*/
        var OffSet = 0;
        if (e.keyCode == 13) {
            /* FOCUS ELEMENT */
            if ($(this).is("input[type='radio']")) {
                var tblID = $(this).closest('table').attr('id');
                var radios = $('#' + tblID).find(":input");
                //alert(radios.index(this));
                OffSet = radios.length - radios.index(this) - 1;
            }
            //alert(OffSet);

            var inputs = $(this).parents("form").eq(0).find(":input");
            var idx = inputs.index(this);
            inputs[idx + OffSet].blur();

            try {
                inputs[idx + OffSet].selectionStart = inputs[idx + OffSet].selectionEnd = -1;
            } catch (e) {

            }
            if (idx == inputs.length - 1) {
                inputs[0].select();
            } else {
                inputs[idx + 1 + OffSet].focus(); //  handles submit buttons
                try {
                    inputs[idx + 1 + OffSet].select();
                } catch (e) {
                }
            }
            return false;
        }
    });

- Arian