Simulate a key press using native javascript

I am trying to simulate keyboard commands inside my application. Currently I can press the arrow keys and I can capture events well. However, I am trying to simulate key events, but I have no luck.

Here is my code:

  //Event
  this.remoteEvent = function(arg_event) {
    var e = document.createEvent('KeyboardEvent');
    var method = (typeof e.initKeyboardEvent !== 'undefined') ? "initKeyboardEvent" : "initKeyEvent";

    switch (arg_event) {
      case 'up':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 38);
        break;
      case 'right':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 39);
        break;
      case 'down':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 40);
        break;
      case 'left':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 37);
        break;
      case 'enter':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 13);
        break;
    }

    document.dispatchEvent(e);
  }

      

Am I approaching something wrong? I don't want to use jQuery and be mostly cross-browser compatible.

Edit: here is the event I'm logging before dispatching:

KeyboardEvent {
  altGraphKey: false
  altKey: false
  bubbles: true
  cancelBubble: false
  cancelable: true
  charCode: 0
  clipboardData: undefined
  ctrlKey: false
  currentTarget: null
  defaultPrevented: false
  detail: 0
  eventPhase: 0
  keyCode: 0
  keyIdentifier: "false"
  keyLocation: 0
  layerX: 0
  layerY: 0
  location: 0
  metaKey: true
  pageX: 0
  pageY: 0
  path: NodeList[0]
  repeat: false
  returnValue: true
  shiftKey: false
  srcElement: document
  target: document
  timeStamp: 1410276114922
  type: "keydown"
  view: Window
  which: 0
}

      

Edit2: Here is my code for capturing events:

document.addEventListener('keydown', key_down_event, false);

//Key down event
function key_down_event(arg_event)
{
  //Ignore all key events if any modifier key is pressed
  if (arg_event.altKey || arg_event.ctrlKey || arg_event.metaKey || arg_event.shiftKey) return;

  //Get the source
  var source = arg_event.target;
  var destination = null;
  var direction = null;
  var escape = false;

  //Switch on key
  switch(arg_event.keyCode)
  {
    case VK_LEFT: direction = 'left'; break;
    case VK_RIGHT: direction = 'right'; break;
    case VK_DOWN: direction = 'down'; break;
    case VK_UP: direction = 'up'; break;
    case VK_ESC: escape = true; break;
  }
  if (!direction && !escape) return;

  arg_event.stopPropagation();
  arg_event.preventDefault();

  console.log(direction);
}

      

+3


source to share


1 answer


According to https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent the method is initKey*Event

completely broken. Compare the various APIs it offers:

  • DOM2 old:

    void initKeyEvent(in DOMString typeArg, 
                      in boolean canBubbleArg, 
                      in boolean cancelableArg, 
                      in boolean ctrlKeyArg, 
                      in boolean altKeyArg, 
                      in boolean shiftKeyArg, 
                      in boolean metaKeyArg, 
                      in unsigned long keyCodeArg, 
                      in unsigned long charCodeArg, 
                      in views::AbstractView viewArg);
    
          

  • DOM3 (no Gecko support):

    void initKeyboardEvent(in DOMString typeArg,
                           in boolean canBubbleArg,
                           in boolean cancelableArg,
                           in views::AbstractView viewArg,
                           in DOMString charArg,
                           in DOMString keyArg,
                           in unsigned long locationArg,
                           in DOMString modifiersListArg,
                           in boolean repeat);
    
          

  • Webkit / Blink:

    void initKeyboardEvent(in DOMString typeArg,
                           in boolean canBubbleArg,
                           in boolean cancelableArg,
                           in views::AbstractView viewArg,
                           in DOMString keyIndentifierArg,
                           in unsigned long locationArg,
                           in boolean ctrlKeyArg,
                           in boolean altKeyArg,
                           in boolean shiftKeyArg,
                           in boolean metaKeyArg,
                           in boolean altGraphKeyArg)
    
          

  • MSIE:

    void initKeyboardEvent(in DOMString typeArg,
                           in boolean canBubbleArg,
                           in boolean cancelableArg,
                           in views::AbstractView viewArg,
                           in DOMString keyArg,
                           in unsigned long locationArg,
                           in DOMString modifierListArg,
                           in boolean repeatArt,
                           in DOMString locationArg);
    
          

Specification Notes:



The initKeyboardEvent method is deprecated. The event constructor syntax [...] is the expected future KeyboardEvent initialization syntax.

However, I could not find a BOM that details constructor initialization. Until then, you can use this polyfill .

0


source







All Articles