将光标移到下一个字段，在输入时不提交表单

Move the cursor to the next field and not submitting the form on enter

本文关键字：输入 提交 表单 光标 下一个 字段      更新时间：2023-09-26

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

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

使用

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

将输入提交按钮更改为按钮类型，这可以帮助您避免这么多不需要的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>
相关文章：