Comment activer le bouton 'Go' sur le clavier virtuel en JavaScript?

Question

Je suis un débutant à javascript et je construis actuellement un site Web avec un formulaire qui navigue les utilisateurs vers une page différente s'ils entrent le code correct dans un formulaire et appuyez sur le bouton «Soumettre».

Actuellement, les utilisateurs doivent cliquer sur le bouton «Envoyer» sur la page pour que cela fonctionne - ils ne peuvent pas utiliser le bouton «Go» sur le clavier virtuel sur des appareils comme les tablettes ou les iPhones pour le moment. Je souhaite corriger le site afin que les utilisateurs puissent également utiliser le bouton "Go" sur leurs tablettes et smartphones plutôt que d'avoir à cliquer sur le bouton "Envoyer".

Mon code:

Le bouton:

<button class="btn btn-info btn-large span12" id="joe_btn" onclick="onSubmit()" touchstart="onSubmit()">Submit</button> 

Le Javascript qui l'exécute:

<script type="text/javascript"> 
     function onSubmit() { 
       if (document.getElementById('password').value == '03010213') {window.location.href = 'map.html'; } 
        else{ alert('Please check your passcode and try again');} 
         } 
    </script> 

Comment puis-je corriger le code afin que les utilisateurs peuvent utiliser le bouton 'Go' sur leurs tablettes et smartphones et ça marche aussi?

Les commentaires seraient les bienvenus! S'il vous plaît noter, je suis un débutant complet avec Javascript, alors s'il vous plaît montrer le code exact corrigé dans vos réponses que je devrais utiliser.

Un grand merci,

Joe

Answer 1

Je crois que pour que le bouton Go pour montrer, vous avez besoin d'un input type="submit" sur la page. Au clic de ce bouton, lancez votre fonction et renvoyez false. Un envoi de formulaire réel ne sera pas effectué, car votre script vous conduira vers une URL différente. Notez que les entrées doivent faire partie d'un form comme indiqué dans la réponse et dans le violon. Voici un JSFiddle montrant le fonctionnement: http://jsfiddle.net/3TG6w/3/embedded/result - naviguez jusqu'à cette sur votre appareil mobile.

<form method="post" action="home.html"> 
    <input type="password" id="password"/> 
    <input type="submit" class="btn btn-info btn-large span12" id="joe_btn" onclick="onSubmit(); return false;" touchstart="onSubmit(); return false;" value="Submit" /> 
</form> 


<script type="text/javascript"> 
    function onSubmit() { 
    if (document.getElementById('password').value == '03010213') {window.location.href = 'map.html'; 
    } 
    else{ 
     alert('Please check your passcode and try again'); 
    } 
    } 
</script>