How to manually trigger key enent by js?

[chenxuuu]

I test many way, but no one works
like this:

var player = document.getElementById('swf_player').children[0];

player.focus();

// left arrow down
var leftKeyDown = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    keyCode: 37,
    which: 37
});
player.dispatchEvent(leftKeyDown);

var leftKeyUp = new KeyboardEvent('keyup', {
    bubbles: true,
    cancelable: true,
    keyCode: 37,
    which: 37
});
player.dispatchEvent(leftKeyUp);

so which way can do this? I want to add virtual keypad for mobile phone or other touch screen device

[n0samu]

See this answer: #6952 (comment)

You need to make Ruffle think it has focus by simulating a PointerEvent first.

[chenxuuu]

@n0samu sadly it doesn't work, only work after I click the player manually

[chenxuuu]

I solved this, it need to focus on the container div inside of ruffle player's shadowRoot, not the player

var player = document.getElementById('swf_player').children[0];

var playerContainer = player.shadowRoot.querySelector("#container");
var pointerEvent = new PointerEvent("pointerdown");
playerContainer.dispatchEvent(pointerEvent);

var gameEvent = new KeyboardEvent('keydown', {
    key:"ArrowRight",code: "ArrowRight", keyCode: 39, bubbles: true, 
});
player.dispatchEvent(gameEvent);

[torokati44]

See also: #18201