How can I map mobile touch events to simulate key press up/down in Javascript?

Question

I have two button-like div elements that I would like to map to the left & right arrow keys on a keyboard.

<div id="leftBtn" ontouchstart="simKeyDown(event, LEFT_KEYCODE);" ontouchend="simKeyUp(event, LEFT_KEYCODE);" onmspointerup="simKeyUp(event, LEFT_KEYCODE);" onmspointerdown="simKeyDown(event, LEFT_KEYCODE);"><img src="../images/left.png"></div>

<div id="rightBtn" ontouchstart="simKeyDown(event, RIGHT_KEYCODE);" ontouchend="simKeyUp(event, RIGHT_KEYCODE);" onmspointerup="simKeyUp(event, RIGHT_KEYCODE);" onmspointerdown="simKeyDown(event, RIGHT_KEYCODE);"><img src="../images/right.png"></div>

Then in my Javascript I have:

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
                    
//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {

**something goes here**

}

I am stuck at the last function where I want to map the touch event to the key press. Any help or direction would be greatly appreciated. I'm also open to other ways of implementing.

assuming you're just wanting to send keystrokes to a text form on the page or some such, look at this thread: https://stackoverflow.com/questions/1472458/programmatically-sending-keys-to-input-field You can not send keypresses to the OS. — John Lord, Jan 13 '21 at 21:25
I'm not sending it to an input field. The left and right key presses will be controlling a canvas element. — javinladish, Jan 13 '21 at 22:21
Maybe like this? https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically?lq=1#answer-44190874 — Getter Jetter, Jan 13 '21 at 22:35

vineeth pappu · Accepted Answer · 2021-01-19T05:16:40.567

You can use 2 variables to track if the left/right key are pressed. And based on that you can check those values in your canvas render animation method to handle necessary actions. eg:

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

And whenever your keyUp or keyDown methods are called you can update the variables to ture/false

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {
  if (eventType === 'KeyUp') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = true
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = true
    }
  }

  if (eventType === 'KeyDown') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = false
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = false
    }
  }

}

And if you have any requestframe method or animation method there you can check for the values and do the required updates.

eg:

function animate() {

  if (LEFT_KEY_PRESSED ) {
    player.left++
  }

  if (RIGHT_KEY_PRESSED ) {
    player.right++
  }

}

How can I map mobile touch events to simulate key press up/down in Javascript?

1 Answers1