Question

HTML code：

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

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

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

Answer 2

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

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

Answer 3

LOL :) AS dfsq在评论中说：＆＃34;如果您不想提交表单，为什么还要按Enter键？＆＃34;

但要阻止使用输入输入表单执行此操作：

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

Answer 4

试试这个

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

按回车键提交表格？

4 个答案: