JQuery simulating keypress event on an input field

Question

I have an input field which is dynamically filled with some AJAX, and once it's filled I would like to have JavaScript to automatically press "Enter" (key event 13) on that input inducing another function, which is hidden to me, to trigger.

Would it be possible with jQuery? I have this code right now, which is not working:

$('#myInputId').focus().trigger({ type : 'keypress', which : 13 });

Do you have any clue on what am I doing wrong?

Why do you think passing an object like this should work? Any source? — Felix Kling, May 25 '11 at 12:55
I found that `[...].trigger({...});` on another topic here in StackOverflow. I tried it and didn't worked, so asked again. — Masiar, May 25 '11 at 13:17

score 37 · Accepted Answer · edited Oct 25 '16 at 10:58

37

You can create an event object:

$('#myInputId').trigger(jQuery.Event('keypress', { keycode: 13 }));

edited Oct 25 '16 at 10:58

Martin Eden

6,143
3
30
33

answered May 25 '11 at 12:50

Felix Kling

795,719
175
1,089
1,143

1

Thanks for the input but the code you pointed out didn't work. I didn't get your comment though. You mean instead of `'keypress'` I should try to set `'keyCode'` ? – Masiar May 25 '11 at 13:00
Works perfectly according to [my test](http://jsfiddle.net/SqSyk/) - tested on Chrome 12, IE9 and FF 3.6 – Shadow The GPT Wizard May 25 '11 at 13:04
2

@Masiar he meant changing to `jQuery.Event('keypress', {keyCode: 13})` but please see my test case and let me know if it doesn't work for you. EDIT: it might now work if the `keypress` handler wasn't added with jQuery - is this the case? – Shadow The GPT Wizard May 25 '11 at 13:05
Well you test case is ok, but I don't see the point with my problem. I have the input field automatically filled with AJAX (`document.getElementById('myInputId').value = data.from.AJAX;`), and I would like, after this, to simply simulate an "enter" event to submit to that input what has been retrieved from AJAX. I'm searching a JavaScript line of code to do that. – Masiar May 25 '11 at 13:16
@Masiar: What is the problem? Does it not work? How is the other function triggered? Which parameters are checked? Does it listen to the `keypress` event? – Felix Kling May 25 '11 at 13:36
It simply does nothing. My AJAX function fills correctly the input box (I can see it from the browser), but the subsequent call that you posted up there doesn't work. This is my current code: `document.getElementById('myInputId').value = data.from.AJAX; $('#myInputId').focus().trigger(new jQuery.Event("keypress", {which: 13}));` but the latter call doesn't happen (if it would, I would have a visual output which there isn't). – Masiar May 25 '11 at 13:48
Well, you have to know how the other handler determines whether the enter key was pressed or not. That's what I meant with changing the parameter. If the other handler examines the `keyCode` property of the event object, then using `which` will not work. – Felix Kling May 25 '11 at 13:50
6

I just discovered by examining the library I'm using that indeed it uses `keyCode`. I then tried `$('#myInputId').trigger(jQuery.Event('keypress', {keyCode: 13}));`and it worked. Thanks for the support and sorry for my incompetence. – Masiar May 25 '11 at 13:54
@Masiar: There is nothing to apologize for. I'm glad I could help :) – Felix Kling May 25 '11 at 14:03
@Masiar for this one, $('#myInputId').trigger(jQuery.Event('keypress', {keyCode: 13})); how do you make it work? – richardrun Apr 11 '19 at 04:10

score 3 · Answer 2 · answered May 25 '11 at 12:52

3

Hi you could try use the change event for when the input area changes :

$('#myInputId').change(function(){
    $('#myInputId').focus().trigger({ type : 'keypress', which : 13 });


});

answered May 25 '11 at 12:52

John

1,309
2
12
24

Thanks for the suggestion, but this is not working either :(. – Masiar May 25 '11 at 13:17

score 0 · Answer 3 · answered Nov 02 '21 at 03:17

0

This method worked for me.

    var keyEvent = jQuery.Event("keypress");
    keyEvent.keyCode = 13;
    $("#myInputId").trigger(keyEvent);

answered Nov 02 '21 at 03:17

Ameer

293
3
11

score -2 · Answer 4 · answered Jan 13 '19 at 12:55

-2

On Keypress Enter :

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        alert('You pressed a "enter" key in somewhere');   
    }
});

answered Jan 13 '19 at 12:55

Masoud Darvishian

3,754
4
33
41

Wrong Answer. Read title of the question again. – Delphi.Boy Aug 12 '19 at 05:32

JQuery simulating keypress event on an input field

4 Answers4

Linked