2
votes

entrer la clé et cliquer ensemble

J'ai un formulaire de connexion. le formulaire obtient le numéro de portable et l'envoie avec ajax pour le code de vérification. mon code fonctionne correctement mais de nombreux utilisateurs après avoir écrit leur numéro de téléphone portable, ils appuient sur la touche Entrée et ne cliquent pas sur le bouton. l'événement que j'écris est onclick et non keydown ou keyup. comment je peux relier ces événements.

le HTML:

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

le javascript:

  <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>

lorsque l'utilisateur clique le bouton d'envoi tout va bien mais lorsque l'utilisateur appuie sur la touche Entrée la page est rechargée et je ne veux pas être rechargée je veux avoir le même résultat

javascript ajax onclick

0 commentaires

3 Réponses :

0
votes

Vous pouvez introduire l'écouteur d'événements Keyup dans votre balise d'entrée.

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

6 commentaires

merci ça marche. mais nous devons entrer au clavier. quel est le KeyCode de la deuxième entrée?

qu'entendez-vous par seconde entrée?

le second entre sur le pavé numérique

vous avez la réponse?

le event.preventDefault () ne fonctionne pas. la page se recharge à nouveau mais l'événement onclick s'exécute

J'ai plusieurs modaux pour la connexion et dans la première fonction, je charge le deuxième modal. cela fonctionne lorsque je clique sur le bouton parce que j'écris sur Click EventListener. mais quand j'appuie sur la touche Entrée au lieu de cliquer, cela recharge ma page et je perds le deuxième modal

0
votes

Vous devez changer le type de bouton de bouton à soumettre ou vous pouvez écrire votre écouteur d'événement keyup , puis exécuter le code lorsque vous appuyez sur Entrée et vous ajouteriez l'attribut onsubmit = "myScript" dans votre balise de formulaire également.

0 commentaires

0
votes

Au lieu de l'événement 'onClick', vous pouvez utiliser l'événement 'onsubmit' et également changer le type de votre bouton de 'bouton' à 'soumettre' comme ci-dessous:

<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>

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

2 commentaires

J'ai plusieurs modaux pour la connexion et dans la première fonction, je charge le deuxième modal. cela fonctionne lorsque je clique sur le bouton parce que j'écris sur le clic EventListener. mais quand j'appuie sur la touche Entrée au lieu de cliquer, cela recharge ma page et je perds le deuxième modal

vous pouvez utiliser event.preventDefault (); depuis le début de la méthode pour empêcher le rechargement de la page, je change le code pour empêcher le rechargement.