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

Question

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

Possible duplicate of How to detect pressing enter on keyboard using jquery? — Keval Bhatt
– Keval Bhatt, Commented Nov 17, 2015 at 4:48
@KevalBhatt I am not allowed to use Jquery unfortunately . . Jquery would make life so much easier if I were allowed to use it :( — gkmohit
– gkmohit, Commented Nov 17, 2015 at 4:52
@MorganGreen it is just the assignment requirement :) I was stuck with this issue, hence I asked :) — gkmohit
– gkmohit, Commented Nov 17, 2015 at 4:59

Tushar · Accepted Answer · 2015-11-17 05:03:40Z

7

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:

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

edited Nov 17, 2015 at 5:03

answered Nov 17, 2015 at 4:36

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gkmohit Over a year ago

perfect, also I am guessing e is for event and el is for element ? :)

Swaprks Over a year ago

@gkmohit yes...you can check the key code with e.keyCode and any manipulation on the element using el.

Tushar Over a year ago

@gkmohit I've added the description of both el and e.

Amey Boralkar · Accepted Answer · 2015-11-17 11:14:11Z

2

Here is the plain javascript I used. Hope it helps you.

document.onkeyup = function(e){
    if(e){
        var key = window.event ? e.keyCode : e.which;
    }else{
        var key = window.event ? event.keyCode : event.which;
    }
    if (key == '13') {
        //Code you would like to execute
    }
}

answered Nov 17, 2015 at 11:14

Amey Boralkar

213 bronze badges

1 Comment

Tushar Over a year ago

Use only var key = e.keyCode ? e.keyCode : e.which;

Leo · Accepted Answer · 2015-11-17 04:56:25Z

0

Rather, I'd suggest not to embed JavaScript in HTML.

document.addEventListener('keydown', function(e) {
  if ( e.keyCode == 13 ) {
    var ele = document.getElementById('userInput');
    alert(ele.value);
  }
});

<form id="inputForm" >
  <label for="userInput">datt1939 : </label>
  <span id="userInputSpan">
    <input type="text" id="userInput">
  </span>
</form>

Since StackOverflow sandbox prevents alert from firing, here's a JSFiddle.

edited Nov 17, 2015 at 4:56

answered Nov 17, 2015 at 4:39

Leo

13.9k5 gold badges47 silver badges64 bronze badges

10 Comments

gkmohit Over a year ago

I like the approach, but it does not seem to work :/

Leo Over a year ago

@gkmohit It does work. StackOverflow prevents the alert from firing, maybe for security concerns.

gkmohit Over a year ago

do you think you could add jsfiddle ? :) it would make it easier :o

Tushar Over a year ago

@gkmohit It'll not work if you include the script in <head>, use DOMContentLoaded or move the script to the end of <body>.

gkmohit Over a year ago

I understand what you have done now :), but what if I dont want a response when just enter is pressed ? :) that is where your response is a little out of topic :)

|

brk · Accepted Answer · 2015-12-01 03:42:48Z

There are couple of ways it can be done

Inline Event

<input type="text" value="" onKeyDown="if(event.keyCode==13) alert('Inline Event');" size="20" id="demo1" placeholder="Inline Event">

Unobtrusive Code using addEventListener

<input type="text" id="demo2" value="" size="20" placeholder="Using addEventListener">

Unobtrusive Code Calling a function

<input type="text" id="demo3" value="" onKeyUp="executeEvent(this,value)" size="20" placeholder="Seperate Handler">

JS

Attaching addEventListener to the DOM element

document.getElementById('demo2').addEventListener('keydown',function(event) {
    if (event.keyCode == 13) {
        alert('5');
    }
})

executeEvent function

function executeEvent(elem,value){
 console.log(elem)
if (event.keyCode == 13) {
        alert('You entered ' +elem.value);
    }
}

Here is JSFIDDLE

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related