Javascript 输入键并再次单击

我有一张登录表。表单获取移动电话号码，并将其与ajax一起发送以获取验证代码。我的代码工作正常，但许多用户在写下手机号码后，按enter键而不是单击按钮。我写的事件是onclick而不是keydown或keydup。我如何将这些事件联系起来

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);
}

var tel=document.getElementById（'tel_按钮'）；
tel.onclick=function（）{
var tel_number=document.getElementById（'tel_input'）。值；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
如果（（xhr.status>=200&&xhr.status<300）| | xhr.status==304）{
如果（xhr.response==1）{
警报（“完成”）；
}否则{
警报（“错误”）
}
}
} 
xhr.open（'post'，''，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xhr.send（“电话号码=”+电话号码）；
}

---

当用户单击“发送”按钮时，一切正常，但当用户按enter键时，页面将重新加载，我不想重新加载，我希望得到相同的结果

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

---

您应该将按钮类型从

button

更改为

submit

，或者您可以编写

keyup

事件侦听器，然后在按下enter键时运行代码，然后添加

onsubmit=“myScript”

属性也在表单标签中。

您可以使用“onsubmit”事件代替“onClick”事件，还可以将按钮类型从“button”更改为“submit”，如下所示：

var formSubmitted=function（）{
event.preventDefault（）；
var tel_number=document.getElementById（'tel_input'）。值；
控制台日志（电话号码）；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
如果（（xhr.status>=200&&xhr.status<300）| | xhr.status==304）{
如果（xhr.response==1）{
警报（“完成”）；
}否则{
警报（“错误”）
}
}
}
xhr.open（'post'，''，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xhr.send（“电话号码=”+电话号码）；
}
}

插入您的手机号码
手机号码：
发送

谢谢。但我们必须在键盘上输入。第二次输入的键码是什么？第二次输入是什么意思？Numpady上的第二次输入你得到答案了吗？我有多个登录模式，在第一个函数中，我加载第二个模式。当我单击按钮时，它工作，因为我在click EventListener上写入。但是当我按en时ter键而不是单击，它会重新加载我的页面，我会丢失第二个模式。登录时有多个模式，在第一个函数中，我会加载第二个模式。当我单击按钮时，它会工作，因为我在click EventListener上写入。但是当我按enter键而不是单击时，它会重新加载我的页面，我会丢失第二个模式。您可以使用event.preventDefault（）；从防止重新加载页面的方法开始，我更改代码以防止重新加载。