按回车键提交表格？答案

【问题标题】：Pressing enter key submit the form?按回车键提交表格？
【发布时间】：2014-07-10 02:40:23
【问题描述】：

HTML 代码：

<html>

<head>
    <title>Registration Form</title>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">
<script>    
function submitAlbum(){
     var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
     var str2 = removeSpaces(document.getElementById('txtInput').value);

     alert("condition1 is ..."+str1);
     alert("condition2 is ..."+str2);
     alert("condition3 is ..."+str1 == str2);
     if (str1 == str2) 
     {

        //alert("Entered captcha is correct");

     }        
     else{

        alert("Entered captcha is wrong");
        document.getElementById("txtInput").value="";
        return false;
     }

     var frm=document.getElementById("custRegistration");
     frm.action="CustomerinfoServlet?formidentity=doRegistrations";
     frm.submit();
}
</script>

</head>

<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">

<div style="width: 100%; background-repeat:no-repeat; margin-top:30px; height:546px; background-image: url('images/mac.png')">
<br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
    <form class="form"  name ="custRegistration"  id="custRegistration"  onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >

        <p class="name">
            <label for="name">Name <span style="color:red">*</span>:</label>
            <input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
            &nbsp;<input type="hidden" id="formidentity" name="formidentity" value="doRegistrations"/>
        </p>

        <p class="email">
            <label for="email">Email Id <span style="color:red">*</span>:</label>
            <input type="email" name="email" id="email" pattern="((\w+\.)*\w+)@(\w+\.)+(com|org|net|us|info|biz|co)" required aria-required="true"  placeholder=""  required/>
        </p>


        <p class="Captcha" style="margin-top:5%; width: 100%;">
        <div style="margin:0 0 0 1%">
        <label class="captchalabel" style="width:38%; float: left;"><span style="margin:0 0 0 9%">Enter the text </span>  <span style="color:red">*</span>:</label>
        <input type="text" name="txtInput" id="txtInput" style="float: left;"  required/>   </div>


        <div style="width: 20%; float: right;">
           <input type="text" id="txtCaptcha" style="background-color:#E7EBF5; text-align:center; margin: 19px 104px 0px 0px; width: 120px; border-radius:0px; border:1px solid #ccc; font-weight:bold; font-family:Arial; " /> 

            <input type="image" id="btnrefresh" onclick="DrawCaptcha();"  src="images/captcha.png"/>  
        </div>

        </p>

        <p class="submit">

            <input type="submit" value="Submit" />
        </p>

    </form>
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.realperson.js"></script>
<script type="text/javascript">

   //Created / Generates the captcha function    
    function DrawCaptcha()
    {
        var a = Math.floor(Math.random() * 10)+ '';
        var b = Math.floor(Math.random() * 10)+ '';       
        var c = Math.floor(Math.random() * 10)+ '';  
        var d = Math.floor(Math.random() * 10)+ '';  
        var e = Math.floor(Math.random() * 10)+ '';  
        var f = Math.floor(Math.random() * 10)+ '';  
        var g = Math.floor(Math.random() * 10)+ '';  
        var code = a + '  ' + b + '  '+ c + '  ' + d + '  ' + e + '  '+ f + '  ' + g;
        document.getElementById("txtCaptcha").value = code
    }
    // Remove the spaces from the entered and generated code
    function removeSpaces(string)
    {
        return string.split(' ').join('');
    }

    </script>
    </html>

在这我有一个问题。问题是每当我在验证码文本框中输入任何文本并按回车键时。然后验证码在变化，即数字在刷新。表单也正在提交并获取消息（'验证码错误'）。谁能告诉我在文本框中输入验证码后按回车键时如何停止表单提交？

【问题讨论】：

不想提交表单为什么要回车？
@dfsq 那是因为他想提交表单，但是验证码却被刷新了:)

标签： javascript html forms security captcha

【解决方案1】：

您可以使用 jQuery 禁用验证码输入字段上的 Enter 按钮。

一个例子是：

$('#txtInput').bind("keypress", function (e) {
    if (e.keyCode == 13) return false;
});

其中keyCode == 13 是Enter 键

更新要将上述代码添加到您的文件中，只需将其复制并粘贴到您的 html 中即可：

<script type="text/javascript">
 $(document).ready(function(){
     $('#txtInput').bind("keypress", function (e) {
         if (e.keyCode == 13) return false;
     });
 });
</script>

【讨论】：

我刚刚又更新了一遍，应该是#txtInput而不是#txtCaptcha
我已经更新了我的代码，但它仍然在提交表单并刷新验证码......你可以粘贴我的代码并测试它......

【解决方案2】：

您可以使用以下 jQuery 代码执行此操作：

$('#custRegistration').bind("keyup keypress", function(e) {
  var code = e.keyCode || e.which; 
  if (code  == 13) {               
    e.preventDefault();
    return false;
  }
});

【讨论】：

【解决方案3】：

哈哈 :) AS dfsq 在评论中说： “如果您不想提交表单，为什么要按 Enter 键？”

但是要在输入时阻止发送表单，请执行以下操作：

$('body').on('keydown', '#chaptcha_input', function(e) {
     if(e.which == 13 && !e.shiftKey) {
        e.preventDefault();
     }
});

【讨论】：

那是因为他想提交表单，但是验证码却被刷新了:)

【解决方案4】：

试试这个

$('#txtInput').on("keyup",function(e){
    if(e.keyCode == 13)
       return false;
    // do your stuff here if not enter key pressed
});

【讨论】：