CODEWITHSUNDEEP
jquerytriggers
user1990553
user1990553

Reputation: 763

How to trigger an input event with jQuery?

I want to add 'a' to the value of input when click a button

Here is my code(with jQuery 1.4.4):

$("#button").click(function(){
    $("#input").trigger("focus");
    var e = jQuery.Event("keypress");
    e.which = '97';
    $("#input").trigger(e);
})

However, it seems only to trigger "focus" event, but failed to "keypress".

Upvotes: 32

Views: 86769

Answers (8)

Luminita Balas
Luminita Balas

Reputation: 662

I used the trigger method:

$('#selector').val(quantity).trigger("input");

Upvotes: 57

Aslam Khan
Aslam Khan

Reputation: 378

Try this :

$("#triggerbtn").click(function(){
$("#InputField").trigger("keypress")
.val(function(i,val){
return val + 'j';
});
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

According to the documentation

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

so the best you could do is

$("#button").click(function(){
    $("#input").trigger("focus").val($("#input").val() + 'a');
})

Upvotes: 1

Flint O'Brien
Flint O'Brien

Reputation: 526

In case you need to take into account the current cursor and text selection...

This wasn't working for me for an AngularJS app on Chrome. Someone pointed out the trigger event will not make the character visible in the input field (at least, that's what I was seeing). In addition, the previous solutions don't take into account the current cursor position and text selection in the input field. I had to use a wonderful library jquery-selection.

I have a custom on-screen numeric keypad that fills in multiple input fields. I had to...

  1. On focus, save the lastFocus.element

  2. On blur, save the current text selection (start and stop)

    var pos = element.selection('getPos')
lastFocus.pos = { start: pos.start, end: pos.end}

  3. When a button on the my keypad is pressed:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

like this?? Sorry, I'm confused with your writings..

$("#button").click(function(){
    $("#input").trigger("keypress") // you can trigger keypress like this if you need to..
    .val(function(i,val){return val + 'a';});
});

reference: .val(function(index, value));

Upvotes: 15

user1990553
user1990553

Reputation: 763

I have known how to deal with it.

Add a eventListener on keypress event to the input and use val to change the value.

In this way there is no need to trigger focus event.

$("#button").click(function(){
    var e = jQuery.Event("keypress");
    e.chara = 'a';
    $("#input").trigger(e);
});

$("#input").keypress(function(e){
    $(this).val(e.chara);
})

Upvotes: 3

Grant Thomas
Grant Thomas

Reputation: 45083

Why not just append to val()?

$("#button").click(function(){
  $("#input").val(
    $("#input").val() + "a"
  );
})

Upvotes: 4

bipen
bipen

Reputation: 36531

you don't need keypress or any other event of input just use val.. and focus it...

try this

 $("#button").click(function(){

   $("#input").val('a').focus();
})

fiddle here

Upvotes: -1

Related Questions