2013-04-15 12 views
8

Ich habe einen Eingang und ich möchte einfach einen Event-Listener für eine Funktion hinzufügen, wenn ich die Eingabetaste drücke, wenn der Eingang fokussiert ist. Wie mache ich das mit reinem JS?Funktion ausführen auf der Eingabetaste

Im Moment habe ich:

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

Also im Grunde die Funktion validate() aktiviert, wenn ich den Text klicken oder ändern, aber ich will um es durch Drücken von Enter aufzurufen.

Antwort

16

können Sie verwenden:

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

Live demo here

+0

+1. Obwohl Sie das 'alert()' mit 'validate()' ersetzen könnten. – nnnnnn

+0

Ja, geändert :-) –

+1

Danke. Funktioniert das auf allen Browsern? – frrlod

0

Sie wäre so etwas wie brauchen wage.addEventListener('keydown', validate);

Ihre Prüf-Funktion würde dann müssen event.keyCode == 13 überprüfen, Eingabetaste 'keypress zu bestimmen.

0

Wenn Sie Ihr Button-Element zu einem

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

ändern wird es mit der Taste auf der Tastatur eingeben arbeiten.

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

Arbeitsbeispielhttp://jsfiddle.net/aMgLK/

0

Oder mit jQuery

$("#wage").on("keydown", function (e) { 
    if (e.keyCode === 13) { //checks whether the pressed key is "Enter" 
     validate(e); 
    } 
}); 
0
$(document).on('keyup', function(e){ 
    var key = e.which; 
    if(key == 13) // the enter key ascii code 
    { 
     login(); 
    } 
}); 
Verwandte Themen