Question

按下回车键应该像Tab键一样按下。按下按键，TextArea和提交按钮应该正常工作。当下一个字段被禁用/只读时，焦点应该从下一个元素跳过。

感谢，

Answer 1

首先，这可能不是一个好主意。但是，这里应该有用：

$(":input").on("keydown", function(event) {
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) {
        event.stopPropagation();
        event.preventDefault();

        $(this)
            .nextAll(":input:not(:disabled, [readonly='readonly'])")
            .first()
            .focus();
    }
});

示例： http://jsfiddle.net/NDcrk/

找到下一个输入的部分可能需要更改，具体取决于您的标记。

Answer 2

此解决方案适合我。在IE和FireFox上测试过它。

<script type="text/javascript">
    function tabE(obj, e) {
        var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
        if (e.keyCode == 13) {
            var ele = document.forms[0].elements;
            for (var i = 0; i < ele.length; i++) {
                var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
                if (obj == ele[i]) {
                    ele[q].focus();
                    break
                }
            }
            return false;
        }
    }
</script>

<form METHOD="POST">
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <INPUT TYPE="submit" Value="Ok">
</form>

我发现它here。

Answer 3

我遇到过类似的问题，我想在小键盘上按 + 标签到下一个字段。现在我已经发布了一个我认为可以帮助你的图书馆。

PlusAsTab：一个jQuery插件，使用numpad plus键作为等效的tab键。

由于您希望输入 / ↵，您可以设置选项。使用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
});

示例HTML

<!-- Enable enter as tab as the default for all fields in this form -->
<form data-plus-as-tab="true">
  <input type="text" value="Enter skips to the next field" autofocus="autofocus" />
  <!-- Exclude this textarea -->
  <textarea data-plus-as-tab="false">Enter works as usual</textarea>
  <input type="text" value="Enter skips to the next field" />
  <select><option>Enter skips here too</option></select>
  <!-- Exclude this submit button -->
  <button type="submit" data-plus-as-tab="false">Enter works as usual</button>
</form>

正如您所看到的，使用data-plus-as-tab="true"轻松启用容器中的所有元素，并且可以轻松地使用data-plus-as-tab="false"排除特定元素。您还可以使用$('textarea, :button').plusAsTab(false);从javascript中排除某些类型（在现有元素上）。

您可以在PlusAsTab enter as tab demo。

中自行尝试

Answer 4

在这种情况下如何检查表单元素？我有很多输入（文本框，单选按钮），但显示一些元素，一些元素不显示

<script type="text/javascript">
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
if (obj == ele[i]) {
ele[q].focus();
break
}
}
return false;
}
}
</script>

<form METHOD="POST">
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<INPUT TYPE="submit" Value="Ok">
</form>

Answer 5

使用JavaScript的焦点功能解决此问题的最简单方法如下：

您可以将其复制并在@home上尝试！

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <input id="input1" type="text" onkeypress="pressEnter()" />
    <input id="input2" type="text" onkeypress="pressEnter2()" />
    <input id="input3" type="text"/>

    <script type="text/javascript">
    function pressEnter() {
      // Key Code for ENTER = 13
      if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    function pressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script>

  </body>
</html>

如何将输入键转换为选项卡键按网页

5 个答案: