输入键和onclick一起答案

【问题标题】：enter key and onclick together输入键和onclick一起
【发布时间】：2019-01-29 12:38:29
【问题描述】：

我有一个登录表单。表单获取手机号码并使用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);
}

当用户点击发送按钮时，一切正常，但当用户按下回车键时，页面重新加载，我不想重新加载，我希望得到相同的结果

【问题讨论】：

标签： javascript ajax onclick

【解决方案1】：

您可以使用“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>

【讨论】：

我有多个登录模式，在第一个函数中我加载了第二个模式。它在我单击按钮时起作用，因为我在单击 EventListener 时编写。但是当我按下回车键而不是点击时，它会重新加载我的页面，并且我失去了第二个模式
你可以使用 event.preventDefault();从防止页面重新加载的方法开始，我更改了代码以防止重新加载。

【解决方案2】：

您可以将 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();
   }
});

【讨论】：

感谢它有效。但我们必须在键盘上输入。第二个输入的 KeyCode 是多少？
第二次进入是什么意思？
小键盘上的第二个输入
你有答案吗？
我有多个登录模式，在第一个函数中我加载了第二个模式。它在我单击按钮时起作用，因为我在单击 EventListener 时编写。但是当我按下回车键而不是点击时，它会重新加载我的页面并且我失去了第二个模式

【解决方案3】：

您应该将按钮类型从button 更改为submit，或者您可以编写keyup 事件侦听器，然后在按下回车键时运行代码，您还可以在表单标签中添加onsubmit="myScript" 属性。

【讨论】：