Detect enter in input elements of a certain class

Question

I need to detect when someone hits "enter" in text inputs with a specific class.

My jQuery is as follows:

$('input.large').keypress(function (e) {
    if(e.which ==13)
        console.log("pressed enter");
});

My HTML is something like this:

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

When I've given the fields IDs and tried $('#elementid').keypress it worked. But this isn't working. I get no console output. What am I missing?

I have. Other code just before and after this is working fine. — user961627, Dec 14 '12 at 18:08
I know... there's nothing wrong with this code. And I can't paste all the code because it's too much, there must be something stopping it. — user961627, Dec 14 '12 at 18:17
Try pasting `console.log("Inside keypress");` inside the key-press method() and before `if` part and see if you are getting any console output, just validate your `key press` if working or not! — palaѕн, Dec 14 '12 at 18:22

David Rodrigues · Accepted Answer · 2019-10-03T21:22:13.500

14

You can use live (.on()) events in document with keydown (I think this is better). It'll allow you detect keydown in current and future elements that matches with a selector.

HTML:

<strong>Personal Name</strong>
<input type='text' class='large' /><br />

<strong>Email</strong>
<input type='text' class='large' />

JS (jQuery 1.7+):

Note: .which, .code, .charCode and .keyCode is now deprecated. Use the following new solution:

jQuery(document).on('keydown', 'input.large', function(ev) {
    if(ev.key === 'Enter') {
        // Will change backgroundColor to blue as example
        this.style.backgroundColor = '#EFF';

        // Avoid form submit
        return false;
    }
});

jsFiddle: http://jsfiddle.net/david_proweb/fjgvhubn/2/

edited Oct 03 '19 at 21:22

answered Dec 14 '12 at 18:20

David Rodrigues

12,041
16
62
90

where should I put this though? I tried it inside `$(document).ready(function(){...});` and also outside it, but either way there was a syntax error. – user961627 Dec 14 '12 at 19:58
Where is this syntax error? **Try it**: create an exclusive ` – David Rodrigues Dec 14 '12 at 20:22
There is a hidden (zero-width) unicode character at the end of the line: `\u200b`. Seems like a line wrap character: https://stackoverflow.com/a/7077279/295246 I know this is old, but I thought I'd share! :) – HEADLESS_0NE Dec 01 '17 at 19:40
1

Properties `which`, `code`, `charCode` and `keyCode` is deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent, please add actual information to your answer. – Sasay Oct 03 '19 at 17:34

score 3 · Answer 2 · answered Dec 14 '12 at 18:19

check this one: http://jsfiddle.net/EJyyr/

used this html:

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large' id='a'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large' id='b'> </td></tr>

and this is the jQuery which logs the input text id

$('.large').keypress(function (e) {
   if(e.which ==13)
    console.log($(this).attr('id'));
});

Alexandre Ribeiro · Answer 3 · 2015-07-06T20:08:55.090

Thanks David Rodrigues for your explanation. It helped a lot. I had to upgrade my JQuery library and the .live() function stopped to work properly.

You can use it to the following

Select all check box inputs of a form when click on select_all_checkboxes input type checkbox:

jQuery(document).on("click", "#select_all_checkboxes", function(){
    var chk = this.checked;
    $('input[id=selectAll]').each(function(){
        this.checked = chk;
    });
});

Call a function "checkMail" when the user left the field using tab ou clicking of the any field that has a class name "email":

jQuery(document).on("blur", 'input.email', function(event){
    var email = $(this).val();
    if (!checkMail(email)) {
        alert("Invalid email.");
        $(this).focus();
    }
});

While your answer is appreciated, a comment on another user's answer should be just that. — J0e3gan, Jul 06 '15 at 20:25

Detect enter in input elements of a certain class

3 Answers3

Linked