9

http://codepen.io/abdulahhamzic/pen/YqMQwB

How do I make it so that when I press enter on a text input, it calls a function? I tried using this:

<input type="text" onkeypress="clickPress()">

But the problem is I only want to press enter to call that function, not press any key. How do I achieve that?

2022 Update: onkeypress is deprecated. You can use onKeyDown instead

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Abdullah Hamzic
  • 439
  • 2
  • 7
  • 17
  • 7
    Possible duplicate of [Enter key press event in JavaScript](http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript) – Sterling Archer May 13 '16 at 17:37
  • 2
    If you wrap your input in a form, and give the form a submit button you can listen to the submit event, which is a much better way to handle such things. – zzzzBov May 13 '16 at 17:45

5 Answers5

25

What you'd want to do is check whether the event's key is the enter key:

In your html, add the event argument

<input type="text" onkeypress="clickPress(event)">

And in your handler, add an event parameter

function clickPress(event) {
    if (event.keyCode == 13) {
        // do something
    }
}

2022 Update: event.keyCode is deprecated on many browsers.

You should do this now:

function clickPress(event) {
    if (event.key == "Enter") {
        // do something
    }
}
Roj
  • 995
  • 1
  • 8
  • 22
Alain Van Hout
  • 409
  • 3
  • 7
  • 1
    The HTML has to be changed to `onkeypress="clickPress(event)"` for this to work. – 4castle May 13 '16 at 17:41
  • 1
    `` wont work, you'd need to put `event` as the argument. – Daan May 13 '16 at 17:46
  • But how do I make it so that both pressing enter and clicking on submit provoke the function? – Abdullah Hamzic May 13 '16 at 17:50
  • @Daan and 4castle are right, so I adjusted that part of the code. – Alain Van Hout May 13 '16 at 18:02
  • @Абдулах Хамзиќ that's actually a separate question, but the answer is very similar: add onclick="doSomething()" and have the "// do something" in my answer make use of the function doSomething – Alain Van Hout May 13 '16 at 18:04
  • Note: Inline JS like the `onkeypress="clickPress(event)"` part of this answer is often discouraged by current web standards (it is mixing content and functionality concerns). See https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup for more information – BCDeWitt May 13 '16 at 18:08
  • @BDawg that's true, if we ignore e.g. ReactJS and (fundamentally) AngularJS. Another important thing to note is that old-school inline JavaScript tended to involve heaps of it, while the above approach essentially only binds an event to a function. – Alain Van Hout May 13 '16 at 18:47
  • @AlainVanHout - I was thinking it was true regardless of those two frameworks. This answer appears to be a vanilla HTML/JS solution, not a React or Angular one (which I believe have a different set of concerns/standards). – BCDeWitt May 13 '16 at 19:45
  • @AlainVanHout - Also, though I certainly agree that a simple function call is better than putting the entire function inline, the `clickPress()` function is now polluting the global namespace - creating more opportunities for a front end maintenance problem to appear. – BCDeWitt May 13 '16 at 20:01
  • Up-voting because you didn't lame out and force dump 70KB of useless frameworks on the client because you actually knew how to answer the question. – John May 13 '16 at 20:36
  • I just had an issue with this in Firefox and then it showed up in Chrome, while writing my console window in a browser (html5/canvas) http://raddev.us/console/console.htm. I think you'll find that you need to handle the key like: if (event.keyCode == 13 || event.keyCode == 'Enter') IE seems to get the int but Chrome and Firefox get the string. – raddevus May 13 '16 at 20:45
5

Use a form instead (the submit event only runs once instead of every key press):

// Attach the event handler to the form element
document.querySelector('.js-form')?.addEventListener('submit', e => {
  e.preventDefault();
  alert(e.currentTarget.myText.value);
});
<form class="js-form">
  <input type="text" name="myText">
</form>
BCDeWitt
  • 4,540
  • 2
  • 21
  • 34
0

The Enter button has a keyCode of 13, so you can use the keypress event using jQuery

$("input").keypress(function(event) {
    if (event.which == 13) {
        alert("Enter was pressed");
     }
});

or, in pure javascript:

<input type="text" onkeypress="clickPress(event)">

function clickPress(event) {
    if (event.keyCode == 13) {
        // do something
    }
}
0

Get the event's keycode and test if it's enter (keycode 13)

<script>
    function clickPress(e){
    if (event.keyCode == 13) {
        // Enter was pressed
        alert("enter");
    }
  }
</script>

<input type="text" onkeypress="clickPress(event)" />

jsfiddle

Daan
  • 578
  • 7
  • 21
0

There could be several "better" ways to do what you want to do but just for the sake of simplicity, you could do this:

<input type="text" id="txt">

Instead of listening to the onkeypress you could attach an event listener within the <script></script> tags and do this:

var myText = document.getElementById("txt");
myText.addEventListener("keyup", function(e) {
    if (e.which === 13) {
        //The keycode for enter key is 13
        alert(e.target.value);
    }
});

And yeah this is definitely a duplicate question.

Lalit
  • 839
  • 2
  • 14
  • 26