web-dev-qa-db-fra.com

exécuter la fonction sur la touche entrée

J'ai une entrée et je voudrais simplement ajouter un écouteur d'événements pour activer une fonction lorsque j'appuie sur Entrée, lorsque l'entrée est focalisée. Comment faire cela avec du JS pur?

En ce moment, j'ai:

HTML:

        Enter your wage:<input type="text" id="wage" value ="" size=20>
        <button id="sub">Submit</button>

Javascript:

    var wage = document.getElementById("wage");
    wage.addEventListener("change", validate);

    var btn = document.getElementById("sub");
    btn.addEventListener("click", validate);

Donc, fondamentalement, la fonction validate () s'active lorsque je clique sur OR change le texte, mais je veux l'appeler en appuyant sur Entrée.

javascripteventsinputlistener
25
frrlod

Vous pouvez utiliser ceci:

var wage = document.getElementById("wage");
wage.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});

function validate(e) {
    var text = e.target.value;
    //validation of the input...
}

Démo en direct ici

36
Minko Gechev
var elem = document.getElementById("wage");
elem.onkeyup = function(e){
    if(e.keyCode == 13){
       validate();
    }
}

Exemple de travail http://jsfiddle.net/aMgLK/

5
Kevin Bowersox

Voici une version de la réponse actuellement acceptée (de @MinkoGechev) avec key au lieu de keyCode:

const wage = document.getElementById('wage');
wage.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        validate(e);
    }
});

function validate(e) {
    const text = e.target.value;
    //validation of the input...
}
3
Marcus

Si vous changez votre élément de bouton en

<input type="submit" value="Submit">

cela fonctionnera avec le bouton Entrée de votre clavier.

1
gvhuyssteen

Ou avec jQuery

$("#wage").on("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});
0
klaasjan69

Vous auriez besoin de quelque chose comme wage.addEventListener('keydown', validate);

Votre fonction de validation devra alors vérifier event.keyCode == 13 pour déterminer la touche 'enter'.

0
scoota269
$(document).on("keyup", function(e) {
    var key = e.which;

    if (key == 13) // the enter key ascii code
    {
        login();
    }
});
0
manoj yadav