輸入密鑰並一起單擊

Question

我有一個登錄表格。 表格會獲取手機號碼，並發送帶有ajax的驗證碼。 我的代碼工作正常，但是許多用戶在寫完手機號碼后按回車鍵而不是單擊按鈕。 我寫的事件是onclick而不是keydown或keyup。 我如何關聯這些事件。

HTML：

  <form class="modal-content animate" id="tel_form">

  <h6>insert your mobile number </h6>




  <label>mobile number : </label>
  <input type="text" id="tel_input"  required>

  <button type="button" id="tel_button">send</button>
</form>

javascript：

var tel = document.getElementById('tel_button');

tel.onclick = function(){
var tel_number = document.getElementById('tel_input').value;

    var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            if(xhr.response == 1){
alert('done');

}else{
 alert('wrong')
  }
}
} 

xhr.open('post' , "<?php echo base_url('login/auth/');?>" , true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("tel_number= " + tel_number);
}

當用戶單擊發送按鈕時，一切正常，但是當用戶按Enter鍵時，頁面已重新加載，但我不想重新加載，我希望得到相同的結果

Answer 1

您可以將Keyup事件偵聽器引入您的輸入標簽。

var input = document.getElementById("tel_input");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
          // Trigger the button element with a click
          document.getElementById("tel_button").click();
   }
});

Answer 2

您應該將按鈕類型從button更改為submit或者可以編寫您的keyup事件偵聽器，然后在按下enter鍵時運行代碼，並且還要在表單標簽中添加onsubmit="myScript"屬性。

Answer 3

您可以使用“ onsubmit”事件代替“ onClick”事件，還可以將按鈕的類型從“按鈕”更改為“提交”，如下所示：

 var formSubmitted = function() { event.preventDefault(); var tel_number = document.getElementById('tel_input').value; console.log(tel_number); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { if (xhr.response == 1) { alert('done'); } else { alert('wrong') } } } xhr.open('post', "<?php echo base_url('login/auth/');?>", true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send("tel_number= " + tel_number); } } 

 <form onsubmit="formSubmitted()" class="modal-content animate" id="tel_form"> <h6>insert your mobile number </h6> <label>mobile number : </label> <input type="text" id="tel_input" required> <button type="submit" id="tel_button">send</button> </form>