Run javascript function when enter is pressed - JavaScript only no Jquery

gkmohit

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

Tushar

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:

  1. Use DOMContentLoaded event instead of using onload.
  2. Use addEventListener to bind event
  3. To set focus on page load, use autofocus attribute on input
  4. To prevent form 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Run Javascript when enter pressed

Call a javascript function when enter key is pressed

Detect selected form when Enter key is pressed via jQuery or JavaScript

Make a form run a javascript when ENTER is pressed or its button is pressed, without submitting

html & javascript enter button redirects to error page - otherwise duplicates text to chat (only when enter is pressed)

Javascript to trigger submit when enter is pressed

Run the function until the mouse button is pressed in JavaScript

Run method when enter is pressed

2 Form Submit buttons - Can I have a Javascript run when only one submit button is pressed

Call specific method in javascript when enter key pressed anywhere in page

Javascript : Scroll to top to the div when enter key is pressed

How to set focus on next input when the button "Enter" is pressed? (javascript)

Trigger a button click with JavaScript when Enter key is pressed

Run a function only for a set amount of time with Javascript (no jQuery)

Only run JavaScript function once

Submit a form only when 'enter' key is pressed

Perform search only when enter is pressed for UISearchController

Run Javascript function when jquery mobile page loads

Function only when key is pressed?

Is there any condition to detect only when browser close (x) is pressed in javascript?

jQuery: content to show when enter key is pressed

JavaScript Button Pressed Only Once

only run javascript function after certain date

Run function only once - functional programming JavaScript

run JavaScript function only if Boolean is true

Run JavaScript function only if user logged in - Django

Using function .when jQuery in "Javascript"

Editor in not showing correct line number when enter key pressed continuously in JavaScript?

Clicking a <span> tag to run JQuery javascript function