将光标移动到下一个字段并且在输入时不提交表单答案

【问题标题】：Move the cursor to the next field and not submitting the form on enter将光标移动到下一个字段并且在输入时不提交表单
【发布时间】：2015-09-14 13:12:55
【问题描述】：

我想要做的是，当我按下回车键时，焦点（光标）移动到下一个输入字段，我得到了。在下面的代码中，当按下 Enter 时，我将表单的提交设置为 false，这样表单就不会在输入时提交。但结果是当我点击提交按钮时表单甚至没有提交。我所需要的只是输入我的光标移动到下一个输入字段，然后单击按钮提交表单。我希望这对你有意义..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$(document).ready(function() {

$('.username').keypress(function (e) {
     if (e.which === 13) {
         var index = $('.username').index(this) + 1;
         $('.username').eq(index).focus();
     }
 });

});
</script>

</head>

<body>
<div class="test">
<form method="POST" id="form">
<input type="text" class="username" onkeypress="sheikh(event)">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="submit" value="Submit"  class="username">
</form>
</div>
<script>
function sheikh(e){
var key;
if(e.which == 13){
    document.getElementById("form").onsubmit=function (){
    return false;
}
    }
    else{
        document.getElementById("form").onsubmit=function (){
    return true;
}

        }


}

</script>
</body>
</html>

【问题讨论】：

你试过if (e.which === 13) { e.preventDefault() ........？

标签： javascript jquery html forms

【解决方案1】：

使用这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<script>
$(document).ready(function() {

$('.username').keypress(function (e) {
     if (e.which === 13) {
         e.preventDefault();
         var index = $('.username').index(this) + 1;
         $('.username').eq(index).focus();
     }
 });
  

});
</script>

</head>

<body>
<div class="test">
<form method="POST" action="http://google.es" id="form">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="text" class="username">
<input type="submit" value="Submit"  class="username">
</form>
</div>
</body>
</html>

【讨论】：

是的，它的工作方式和我想要的完全一样......但我无法在输入字段中输入任何内容......那是什么？？？
抱歉错误。我编辑了答案，现在preventDefault() 只在检测回车键的 if 语句中执行。
该解决方案完美运行。但是当到达最后一个输入时提交表单呢？
@ghulam_ali 很简单，您必须检测它是否是最后一个输入（也就是最后一个 index 数字），并在该条件下应用 $('form').submit();。

【解决方案2】：

将输入提交按钮更改为按钮类型，这样可以帮助您避免这么多不需要的js代码，请尝试以下代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
$(document).ready(function() {
$(".username:first").focus();
$('.username').keypress(function (e) {
    if (e.which === 13) {
    if(!($(this).prop('nodeName')=="BUTTON")){
    e.preventDefault(); 

         var index = $('.username').index(this) + 1;
         $('.username').eq(index).focus();
     }
     }

 });

});
</script>
    </head>

    <body>
    <div class="test">
    <form method="POST" action="http://www.google.com" id="form">
    <input type="text" class="username">
    <input type="text" class="username">
    <input type="text" class="username">
    <input type="text" class="username">
    <input type="text" class="username">
    <input type="text" class="username">
    <button type="submit" value="submit" class="username">submit</button>
    </form>
    </div>
    </body>
    </html>

【讨论】：

与上述相同的错误..由于 preventdefault.i 无法在输入字段中写入任何内容
脚本被编辑了请检查一下，现在preventdefault只会在我们按下回车键时触发