I have an input and I'd simply like to add an event listener for it to activate a function when I press enter, when the input is focused. How do I do this with pure JS?
Right now I have:
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);
So basically the function validate() activates when I click OR change the text, but I want to call it by pressing enter.
You can use this:
var wage = document.getElementById("wage");
wage.addEventListener("keydown", function (e) {
if (e.code === "Enter") { //checks whether the pressed key is "Enter"
validate(e);
}
});
function validate(e) {
var text = e.target.value;
//validation of the input...
}
+1. Though you could replace the
alert()withvalidate().All browsers which supports
addEventListener(IE9+, check out here developer.mozilla.org/en-US/docs/DOM/…)Use named functions instead of anonymous, because it would be impossible to remove this listener.
One important detail e.keyCode is currently deprecated, the new correct way is e.key References //e.keyCode developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode //e.key developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Why is the
eused? and Can we execute the code without it?