CODEWITHSUNDEEP
javascriptjquery
jQuerybeast
jQuerybeast

Reputation: 14490

Detect the Enter key in a text input field

I'm trying to do a function if enter is pressed while on specific input.

What I'm I doing wrong?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Is there a better way of doing this which would say, if enter pressed on .input1 do function?

Upvotes: 443

Views: 656647

Answers (14)

Apurv
Apurv

Reputation: 113

In JS add event onKeyDown

 <input
     type="search"
     onKeyDown={(event) => {
     if (event.key === "Enter") {
      handleNavigation();
      }
    }}
                    
    />

Upvotes: 0

biST
biST

Reputation: 1

If anyone need one line solution:

<input type="text" onkeyup="(event.key === 'Enter') ? alert('Entered') : undefined;" placeholder="Type Something and Press Enter">

Upvotes: 0

Gibolt
Gibolt

Reputation: 47069

event.key === "Enter"

More recent and much cleaner: use event.key. No more arbitrary number codes!

NOTE: The old properties (.keyCode and .which) are Deprecated.

const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Modern style, with lambda and destructuring

node.addEventListener("keyup", ({key}) => {
    if (key === "Enter") {
        // Do work
    }
})

If you must use jQuery:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Docs

Supported Browsers

Upvotes: 248

Ian
Ian

Reputation: 239

A solution that worked for me is this:

<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">

Upvotes: 3

Omzig
Omzig

Reputation: 911

Here is what I did for my angular project:

HTML:

<input
    class="form-control"
    [(ngModel)]="searchFirstName"
    (keyup)="keyUpEnter($event)"
/>

TypeScript:

keyUpEnter(event: KeyboardEvent) {
    if (event.key == 'Enter') {
        console.log(event);
    }
}

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219920

$(".input1").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        // Do something
    }
});

// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.

Upvotes: 697

Umar Niazi
Umar Niazi

Reputation: 534

This code handled every input for me in the whole site. It checks for the ENTER KEY inside an INPUT field and doesn't stop on TEXTAREA or other places.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});

Upvotes: 0

Jorge Santos Neill
Jorge Santos Neill

Reputation: 1785

The solution that work for me is the following

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

Upvotes: 7

jonathan klevin
jonathan klevin

Reputation: 193

Try this to detect the Enter key pressed in a textbox.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO

Upvotes: 2

Roy Shoa
Roy Shoa

Reputation: 3195

The best way I found is using keydown ( the keyup doesn't work well for me).

Note: I also disabled the form submit because usually when you like to do some actions when pressing Enter Key the only think you do not like is to submit the form :) 

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

Upvotes: 10

Jobelle
Jobelle

Reputation: 2834

 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

Upvotes: 0

wesbos
wesbos

Reputation: 26307

$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Or just bind to the input itself

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

To figure out which keyCode you need, use the website http://keycode.info

Upvotes: 44

Indra Kumar S
Indra Kumar S

Reputation: 2934

It may be too late to answer this question. But the following code simply prevents the enter key. Just copy and paste should work.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

Upvotes: 6

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this to detect the Enter key pressed in a textbox.

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

Upvotes: 14

Related Questions