jQuery Event Keypress: Enter key

Question

i have a combo box which has got values and i want to give the user to select the values when the Enter key pressed.

User can navigate through Arrow key
Select the value when user enters Enter key.

I have done this one :

$('#cmb_CIMtrek_DailyshipCo_CustomerName select').bind('keypress', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 13) { //Enter keycode
       //Do something
         alert("Enter key Pressed");
     }
});

but is not giving alert when I press Enter key.

What could be the problem and how to solve it?

Best Regards.

I don't think it's the problem you're having, but this is unnecessary with jQuery: `var code = (e.keyCode ? e.keyCode : e.which);` jQuery [normalizes the `which` value for you](http://api.jquery.com/category/events/event-object/). — T.J. Crowder, Jan 28 '13 at 07:26
Try on `keyup`. From the jQuery docs: "_The keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms._" — elclanrs, Jan 28 '13 at 07:27
Pressing enter in some html input elements will cause the form to submit or at least the onsubmit to be triggered (Firefox will trigger the input type submit onclick as well). If this is the case you might want to use preventDefault on the event object: http://api.jquery.com/event.preventDefault/ — HMR, Jan 28 '13 at 07:36
@HMR FYI no such behaviour in HTML5 on select tags: http://jsfiddle.net/CNad7/1/ and Anto the thing you want to achieve is already supported by default with select tag — Muhammad Talha Akbar, Jan 28 '13 at 07:39
@AspiringAqib it is not working that is the reason why the post is here. — Java Questions, Jan 28 '13 at 07:42

catherine · Accepted Answer · 2013-01-28T08:01:38.440

9

 <select>
    <option value="1">1</option>
    <option value="2">2</option>
 </select>     

 <script> 
 $('select').live('keypress',function(e){
     var p = e.which;
     if(p==13){
         alert('enter was pressed');
     }
 });
 </script>

edited Jan 28 '13 at 08:01

answered Jan 28 '13 at 07:43

catherine

22,492
12
61
85

Okay this one seems to be working, now i want to restrict the `Enter` option when a particular element is clicked in my case it is Combo box`select` – Java Questions Jan 28 '13 at 07:55
i have few combo boxes, each one does its own functionality, how to trigger this for particular combo box – Java Questions Jan 28 '13 at 08:10
use their id. each combo box you put a unique id then change the script to $('#combo_id').live('keypress',function(e){ – catherine Jan 28 '13 at 08:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23484/discussion-between-anto-and-cathy) – Java Questions Jan 28 '13 at 08:21
4

live is deprecated. Use on instead – DPC Jan 29 '15 at 10:26

score 2 · Answer 2 · answered Jan 28 '13 at 07:31

Try this one

$('#cmb_CIMtrek_DailyshipCo_CustomerName select').keypress(function(event){

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            alert('You pressed a "enter" key in textbox');  
        }
        event.stopPropagation();
    });

Rembunator · Answer 3 · 2013-01-28T08:11:27.180

If you want to post the form when the user presses enter you could also use a submit button which has this behaviour as a default.

If you don't want to post the form but do have a submit button, this might catch the key event and doesn't propagate.So remove any submit-button.

To restrict the event to an object use:

if (e.target == document.getElementById('element-id'))

or jquery

if (this == $('#element-id').get(0))

Your code would look something like this:

$(document).bind('keypress', function(e) 
    {
    // Use 'this' or 'e.target' (whithout quotes)
    if (this == $('#cmb_CIMtrek_DailyshipCo_CustomerName select').get(0))
        {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13)
            { //Enter keycode
            //Do something
            alert("Enter key Pressed");
            }
        }
    // Stop the event from triggering anything else
    e.stopPropagation();
    });

Using live() is deprecated in favour of on() e.g.: $("#id").on("keypress", function(event){ alert('message'); }); — Rembunator, Jan 28 '13 at 08:35

score 0 · Answer 4 · answered Dec 13 '19 at 12:45

For example:

<!html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<div class="form-group">
    <label for="exampleFormControlSelect1">Bodega</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option value="despacho">Despacho</option>
      <option value="ventas">Ventas</option>
    </select>
</div>

 <script>
     $('#exampleFormControlSelect1').on('keypress',function(e){
         var p = e.which;
         if(p==13){
             alert('enter was pressed');
         }
     });
 </script>

jQuery Event Keypress: Enter key

4 Answers4

Linked