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>

输入密钥并一起单击

3 个答案: