How to simulate typing in input field using jQuery?

You can send key events, and anything listening for them will get them, but they will not change the input, so you will not see the letter A appear, for example. This is mostly a security thing; see “Manually firing events” for a discussion about that.

So, if you want the letter to appear, you must alter the input’s value as you send the key event. There is a jQuery plugin for that, see “The $.fn.sendkeys Plugin”.

You can see how an <input> reacts with user-applied keys, key events, and that plugin at this jsFiddle.

For reference, this is the key piece of code from that jsFiddle:

$("button").click ( function (zEvent) {
    if (zEvent.target.id == "simA_plain") {
        console.log ("Send Plain key event");
        var keyVal = 65;
        $("#eventTarg").trigger ( {
            type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
        } );
    }
    else {
        console.log ("Use the Plugin to simulate a keystroke");
        $("#eventTarg").sendkeys ("B") ;
    }
} );


That plugin should be sufficient if you are just trying to “simulate typing on an <input>“. However, depending on what you are really trying to do, you may need to do one or more of the following:

  1. Just set the text to what you want it to be.
  2. Send a keydown event, if the page’s javascript triggers off of that.
  3. Likewise, send a change event, etc., if the page’s javascript triggers off of that.
  4. Just find and call the page’s javascript directly. Use script injection, the location hack, unsafeWindow, and/or @grant none mode to do that.
  5. Something else? State your true objective and link to the target page.

Leave a Comment