簡體   English   中英

按回車鍵提交表格?

[英]Pressing enter key submit the form?

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>

在這我有一個問題。 問題是每當我在驗證碼文本框中輸入任何文本並按Enter鍵時。 然后驗證碼代碼正在改變,即數字正在刷新。 表格也是提交和獲取消息('驗證碼錯誤')。 當我們在文本框中輸入驗證碼后按Enter鍵時,有人能告訴我如何停止表單提交嗎?

那么你可以使用jQuery禁用驗證碼輸入字段上的Enter按鈕。

一個例子是:

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

其中keyCode == 13Enter

更新要在文件中添加上述代碼,只需將其復制並粘貼到您的html中:

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

您可以使用以下jQuery代碼執行此操作:

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

LOL :) AS dfsq在評論中說:“如果你不想提交表格,為什么還要按Enter?”

但要阻止使用輸入輸入發送表單,請執行以下操作:

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

嘗試這個

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM