Trigger a keypress keydown keyup event in JS jQuery

Question

What is the best way to simulate a user entering text in a text input box in JS and or jQuery   I don t want to actually put text in the input box  I just want to trigger all the event handlers that would normally get triggered by a user typing info into a input box  This means focus  keydown  keypress  keyup  and blur  I think    So how would one accomplish this

User · Answer

First of all  I need to say that sample from Sionnach733 worked flawlessly  Some users complain about absent of actual examples  Here is my two cents  I ve been working on mouse click simulation when using this site   https   www youtube com tv  You can open any video and try run this code  It performs switch to next video   function triggerEvent el  type  keyCode        if   createEvent  in document                   modern browsers  IE9              var e   document createEvent  HTMLEvents                e keyCode   keyCode              e initEvent type  false  true               el dispatchEvent e         else              IE 8         var e   document createEventObject            e keyCode   keyCode          e eventType   type          el fireEvent  on  e eventType  e            var nextButton   document getElementsByClassName  icon-player-next   0   triggerEvent nextButton   keyup   13      simulate mouse enter key press

User · Answer

Here s a vanilla js example to trigger any event   function triggerEvent el  type   if   createEvent  in document               modern browsers  IE9          var e   document createEvent  HTMLEvents            e initEvent type  false  true           el dispatchEvent e         else              IE 8         var e   document createEventObject            e eventType   type          el fireEvent  on  e eventType  e

User · Answer

For typescript cast to KeyboardEventInit and provide the correct keyCode integer  const event   new KeyboardEvent  keydown               keyCode  38            as KeyboardEventInit

User · Answer

I thought I would draw your attention that in the specific context where a listener was defined within a jQuery plugin  then the only thing that successfully simulated the keypress event for me  eventually caught by that listener  was to use setTimeout    e g   setTimeout function         txtName   keypress       1000     Any use of     txtName   keypress   was ignored  although placed at the end of the  ready   function  No particular DOM supplement was being created asynchronously anyway

User · Answer

You can achieve this with  EventTarget dispatchEvent event  and by passing in a new KeyboardEvent as the event   For example  element dispatchEvent new KeyboardEvent  keypress     key    a      Working example    x000D   x000D     get the element in question x000D  const input   document getElementsByTagName  input   0   x000D   x000D     focus on the input element x000D  input focus    x000D   x000D     add event listeners to the input element x000D  input addEventListener  keypress    event    gt    x000D    console log  You have pressed key     event key   x000D      x000D   x000D  input addEventListener  keydown    event    gt    x000D    console log  key    event key  has been pressed down    x000D      x000D   x000D  input addEventListener  keyup    event    gt    x000D    console log  key    event key  has been released    x000D      x000D   x000D     dispatch keyboard events x000D  input dispatchEvent new KeyboardEvent  keypress      key   h      x000D  input dispatchEvent new KeyboardEvent  keydown      key   e      x000D  input dispatchEvent new KeyboardEvent  keyup     key   y      x000D   lt input type  text  placeholder  foo    gt  x000D   x000D   x000D    MDN dispatchEvent  MDN KeyboardEvent

User · Answer

You could dispatching events like   el dispatchEvent new Event  focus     el dispatchEvent new KeyboardEvent  keypress    key   a

User · Answer

You can trigger any of the events with a direct call to them  like this     function            item   keydown           item   keypress           item   keyup           item   blur          Does that do what you re trying to do   You should probably also trigger  focus   and potentially  change    If you want to trigger the key-events with specific keys  you can do so like this     function         var e     Event  keypress        e which   65     Character  A         item   trigger e         There is some interesting discussion of the keypress events here  jQuery Event Keypress  Which key was pressed   specifically regarding cross-browser compatability with the  which property

User · Answer

To trigger an enter keypress  I had to modify  ebynum response  specifically  using the keyCode property   e     Event  keyup    e keyCode  13     enter    input   trigger e

User · Answer

You re now able to do   var e     Event  keydown    keyCode  64

[javascript] Trigger a keypress/keydown/keyup event in JS/jQuery?

Examples related to javascript

Examples related to jquery

Examples related to dom-events