如何使用 enter 从一个输入框移动到具有相同类的另一个输入框答案

【问题标题】：How to move from one inputbox to another with the same class using enter如何使用 enter 从一个输入框移动到具有相同类的另一个输入框
【发布时间】：2019-01-30 18:14:43
【问题描述】：

我首先要说我对 javascript、jquery 和 php 还很陌生。虽然我比其他 2 更熟悉 PHP，但我仍然只是一个初学者。所以我正在尝试制作这个 HTML 表单，以便人们可以提交简短的评论。

我的目标是使用它的人可以使用 enter 在输入框之间切换，但只能在具有相同类的特定输入框之间切换。否则，可以按回车键提交表单。（不会出现提交按钮）。

这是我的 HTML（只是一个试用，还不是真的）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title> Help </title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input").bind("keydown", function(event) {
if (event.which === 13) {
    alert("asd");
    event.stopPropagation();
    event.preventDefault();
   $(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
  }
});
</script>
</head>
<body>
<h3> welcome to the help page </h3>

 <form  action= "Helppage.php" method="post" ">

            <p><b> name: </b></br>
            <input class= "code" type="text" name="name" size= "20" ></p>
            <p><b> location: </b> </br>
            <input class= "code" type= "text" name="location" size= "20" >  </p>
            <p><b> message:</b></br>
            <input class= "code" type= "text" name="message"size= "20" ></p>
            <p><b> remark:</b></br>
            <input  type= "text" name="remark"size= "20" ></p>
            <p><b> department:</b></br>
            <input  type= "text" name="department"size= "20" ></p>

      </form>
 <h3> thanks for participating!!</h3>



</body>
</html>

我已经尝试找到解决方案。喜欢这个：How to use enter key to focus into next input 还有这个：Activating next input field in form on enter

但由于某种原因，我似乎无法让它们中的任何一个工作......

提前致谢！

【问题讨论】：

您已通过有效答案链接到类似问题，但没有告诉我们您的实施中为什么/什么不起作用。请展示您的实现，否则我们将无能为力！
使用第一个链接中的代码，但使用$("input") 而不是"$("input,select") 并在您使用它时将您的HTML 更改为小写。
所以我添加了在我给出的示例之一中使用的代码。但我似乎无法弄清楚如何让它通过具有相同类别的盒子。它只是....提交表单：s.
您的<form> 中有一个错字，一个双引号" 太多了。只是说！
您尝试在加载 dom 之前绑定事件监听器。这就是 jQuerys document ready 的用途！

标签： javascript php jquery html

【解决方案1】：

通常在 HTML 中，您可以通过选项卡按钮进入下一步。为每个表单元素定义选项卡索引。

<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />

如果您想在 Enter 按钮上执行相同操作，您可以按照链接中的建议在 jquery/javascript 中执行此操作。在 HTML 中 Enter 表示提交表单。

【讨论】：

虽然这可行，但 tabindex 通常用于可访问的导航，您最终可能会覆盖用于导航网页或站点的其他 tabindex。
Tabindex 未覆盖。这是由于浏览器造成的。浏览器将使用您指定的 tabindex，但在该选项卡之后将循环浏览其他所有内容。任何按钮都会发生这种情况，直到您没有特别绑定每个按钮。 @FergalAndrews
我认为您误解了我的评论 amku91，我本可以更好地解释 :-)。许多用于辅助功能的屏幕阅读器使用 tabindex。如果您为 tabindex 指定其他功能，您可能会覆盖屏幕阅读器的命令。如果其他开发人员出于可访问性原因在导航中添加了标签索引，这也可能适用。

【解决方案2】：

参考this，感谢him

<!DOCTYPE html>
 <html>
<body >
 <h3> Welcome to the help page </h3>

  <FORM  ACTION= "Helppage.php" METHOD="POST"">

        <p><b> Name: </b></br>
        <input class="code" type="text" name="Name" size= "20" /></p>
        <p><b> Location: </b> </br>
        <input class= "code" type= "text" name="Location" size= "20"/> </p>
        <p><b> Message:</b></br>
        <INPUT CLASS= "code" TYPE= "text" NAME="Message"SIZE= "20" /></p>
        <p><b> Remark:</b></br>
        <INPUT  TYPE= "text" NAME="Remark"SIZE= "20" /></p>
        <p><b> Department:</b></br>
        <INPUT  TYPE= "text" NAME="Department"SIZE= "20" /></p>

  </FORM>
 <h3> Thanks for participating!!</h3>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script>
  $("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
   inputs.eq( inputs.index(this)+ 1 ).focus();
  });

 </script>

 </body>
 </html>

【讨论】：

【解决方案3】：

试试这个代码

    $('.code').keydown(function(e){
        if(e.keyCode==13){
            var len=$('.code').length;
            var index=$('.code').index(this);
            index++;
            if(index==len)
                index=0;
            $('.code:eq('+index+')').focus();
            return false;
        }
    });

【讨论】：

【解决方案4】：

你把你的脚本放错地方了。

我建议在页面底部添加您的<script>（带功能）（阅读</body>）。那将变成：

<html>

<head>
    <title> Help </title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <!-- 1.3.2, really? That is quite old! :-D -->
</head>
<body>
<h3> welcome to the help page </h3>

<form action="formuliergastenboek.php" method="post">

<p><b> name: </b></br>
    <input class="code" type="text" name="name" size="20"></p>
<p><b> location: </b> </br>
    <input class="code" type="text" name="location" size="20"></p>
<p><b> message:</b></br>
    <input class="code" type="text" name="message" size="20"></p>
<p><b> remark:</b></br>
    <input type="text" name="remark" size="20"></p>
<p><b> department:</b></br>
    <input type="text" name="department" size="20"></p>

</form>
<h3> thanks for participating!!</h3>

<script type="text/javascript">
    $("input").bind("keydown", function(event) {
        if (event.which === 13) {
            alert("asd");
            event.stopPropagation();
            event.preventDefault();
            $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
        }
    });
</script>

</body>
</html>

文档：

https://www.w3schools.com/js/js_whereto.asp

【讨论】：