Question

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

我的目标是使用它的人可以使用enter在输入框之间切换，但只能使用具有相同类别的特定输入框。否则，可以按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

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

谢谢！

Answer 1

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

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

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

Answer 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>

Answer 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;
        }
    });

Answer 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

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

4 个答案: