Menu
Hello I am trying to run a javascript function when I press enter.
Here is my code so far
MY HTML
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<div>
<form id="inputForm">
<label for="userInput">Input : </label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this)" />
</span>
</form>
</div>
</body>
</html>
MY JAVASCRIPT
function readInput(e) {
if (e.keyCode == 13) { // 13 is enter key
// Execute code here.
// var temp = e.value;
// console.log(temp);
alert(e.value);
}
}
Here is my JSBin
783
You're passing this to the event handler and using it as event object.
Pass the element instance and event object to the event handler.
<input type="text" id="userInput" onkeydown="readInput(this, event)" />
^^^^ ^^^^^
And get them in the handler
function readInput(el, e) {
^^ ^
// el: Element
// e: Event object
Updated JSBin
window.onload = function() {
document.getElementById("userInput").focus();
};
function readInput(el, e) {
if (e.keyCode == 13) {
console.log(el.value);
}
}<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this, event)"/>
</span>
</form>
</div>Suggestions:
autofocus attribute on inputform from submit, use return false; or event.preventDefault() from event handler.document.addEventListener('DOMContentLoaded', function() {
document.getElementById('userInput').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
console.log(this.value);
e.preventDefault(); // Prevent default action i.e. submit form
// return false;
}
}, false);
});<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" autofocus />
</span>
</form>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
