HTML表單標籤提交回車鍵

我有<form>標籤，其反應「回車鍵」的問題。HTML表單標籤提交回車鍵

我的HTML代碼如下所示：

<html> 
<head> 
    <title>Poring</title> 

    <meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1 text/html; charset=utf-8"> 

    <script src="./js/jquery.ajax-cross-origin.min.js"></script> 

    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <link rel="stylesheet" href="./css/reset.css"> 
    <link rel="stylesheet" href="./css/style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <script src="./js/jquery-3.1.1.min.js"></script> 
    <script src="./js/bootstrap.min.js"></script> 
    <script> 
       $(document).ready(function() { 

         $("div.input-group > :text").keypress(function(data){ 
           if(data.which == 13) { 
             if ($("div.tags").children().length == 5) { 
               alert("maximum 5."); 
               $("div.input-group > :text").val(''); 
               return; 
             } 
             if ($("div.input-group > :text").val() != "") { 
               $("div.tags").append('<input name="favorites" class="btn-custom2 btn-floatleft" type="button" value="' + $("div.input-group > :text").val() + '">'); 
               $("div.input-group > :text").val(''); 

             } 
           } 
         }); 
         $("div.tags").on('click', ':button', function() { 
           $(this).remove(); 
         }); 


         function readURL(input) { 
           if (input.files && input.files[0]) { 
             var reader = new FileReader(); 

             reader.onload = function (e) { 
               $('.col-md-4 > img').attr('src', e.target.result); 
             }        

             reader.readAsDataURL(input.files[0]); 
           } 
         }  

         $(":file").change(function(){ 
           readURL(this); 
         }); 

       }); 
    </script> 
</head> 

    <body style="background-color:#3591cd;"> 
     <div class="login-wrapper"> 
       <a href="login.html" class="center-poring"><img src="img/poring.png"></a> 
       <div class="signup-container shadow" style="margin-bottom:30px;">     
         <form class="form-login " action="login.html" onkeydown="return stopKeyPress(event)"> 
         <h2 class="form-login-heading">sign up</h2> 
         <div class="login-wrap row"> 
           <div class="col-md-4"> 
             <img alt="profile picture css" class="pic-circle-corner img-profile" src="img/img-profile-empty.png" /> 
             <div class="file_input_div"> 
               <button class="btn-custom1 img-profile file_input_img_btn">profile</button> 
               <input type="file"class=" file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value"></input> 
             </div> 
           </div> 
           <div class="col-md-8"> 
            <input type="email" class="form-control" placeholder="email" autofocus> 
            <br> 
            <input type="text" class="form-control" placeholder="name"> 
            <br> 
            <input id="password1" type="password" class="form-control" placeholder="password"> 
            <br> 
            <input id="password2" type="password" class="form-control" placeholder="password check">  
           </div> 
             <div class="login-wrap" style="margin:10px;" > 
                 <p style="color:#000000;">favorites (maximum-5)</p> 
               <div class="input-group"> 

                 <div class="input-group-addon"><img src="img/ic-tag.png"></div>  
                 <input type="text" class="form-control" placeholder="enter the tag">  
               </div>  
               <div class="tags">  
               </div> 
             </div> 
          <div id="login-link"> 
           <input type="submit" value="sign up" class="btn btn-theme btn-block btn-signup signup-button"> 
          </div>  
         </div>  
         </form>  

       </div> 
      </div> 
      <script> 
      function stopKeyPress(data) { 
       if(data.which == 13) { 
        return false; 
       } 
      } 
      function formValidation() { 
       alert('hello'); 
       if ($("#password1").val() != $("#password2").val() || 
         ($("#password1").val().length == 0 || $("#password2").val().length == 0)) 
        return false; 
       else 
        return true; 
      } 
      </script> 
     </body> 
</html>

從這裏所有的<input>屬於一個<form>標籤。如果我使用「輸入密鑰」，則提交表單。所以，我停止使用stopKeyPress()函數。

現在，當我用「回車鍵」，形式不提交。這是我想要做的。

但是，從<input type="text" class="form-control" placeholder="enter the tag">，當我在這個<input type="text">輸入一些文字，我想用「回車鍵」，使新<input type="button">其值是<input type="text">的價值。（這是在<head>的JavaScript代碼）。

但是，因爲我停下來與「回車鍵」在這個<form>標籤，這也沒有反應「回車鍵」。

是否有<input type="text">起反應對「回車鍵」的任何解決方案，同時提交不允許「回車鍵」？如何做呢？

來源

2016-11-17 user7159879

是的，有... – Phiter

的可能的複製[使用Javascript提交ENTER文本框（HTTP：//計算器。com/questions/8894226/javascript-submit-textbox-on-enter） –

爲什麼不直接在提交表單完成（正確填充）和/或提交'按鈕有「焦點」？ – junkfoodjunkie

您應該添加一個id您輸入這樣

<input type="text" id="t1">

的想法是添加一個事件偵聽器，或者簡單地從JavaScript調用的函數。從JavaScript

功能

HTML

<input type="text" id="t1" onKeyPress="myFunction(e,val)">

的Javascript

<script> 

function myFunction(e,input) { 
    console.log("Do your stuff"); 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if(code == 13) { //Enter keycode 
       alert('enter press'); 
} 
</script>

在VAR代碼

我把三元運算符。

e is event var in javascript

如果要訪問輸入類型，你可以使用jQuery與$("#t1")

嘗試此鏈接event.preventDefault() vs. return false

來源

2016-11-17 10:08:36 Fedeco

'回車鍵'對功能沒有反應，因爲我停止了關於'

的ID添加到您想要輸入的標籤執行操作。

<input type="text" id="addNewBtn">

改爲在窗體上調用stopKeyPress（），在輸入的按鍵時調用它。並排除要對工作的keydown /輸入按鍵

即

$(document).ready(function(){ 
    $('#formid').on('keydown','input',function(e){ 
    if($(this).attr('id') != 'addNewBtn'){ 
      stopKeyPress(e); 
     } 
    }); 
});

來源

2016-11-17 10:22:49

HTML表單標籤提交回車鍵

回答

相關問題