Question

我想要做的是，当我按下回车键时，焦点（光标）移动到下一个输入字段，即时通讯。在下面的代码中，当输入是按下时，我将表单的提交设置为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>

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

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

将光标移动到下一个字段，然后在输入

2 个答案: