メモ帳

やったこととかちまちまと書く 需要のない記事を生成している

JavaScriptでキーボードの入力値を別の値しようとしたらめちゃめちゃ苦しんだ話

Electronで遊んでる最中にキーボードの入力値を別の値にしようとしたらめちゃめちゃ苦しんだ話です。(3時間程度だけど)

やりたかったこと

aを打つとbが出てくる!
どのキーを押しても右矢印が押されたことになる!
Cmd+Qが動かないぞ!(考えてなかった・・)

答え

document.addEventListener("keydown",function (e) { 
    e.preventDefault();
    document.dispatchEvent(new KeyboardEvent("keydown",{
        key: "a"
    }));
};

stackoverflow.com

詳細

KeyboardEvent() - Web API インターフェイス | MDN
EventTarget.dispatchEvent() - Web API インターフェイス | MDN
KeyboardEvent.key - Web APIs | MDN
Event.preventDefault() - Web APIs | MDN
まあ上記のコードとMozillaさんの文献を見たら大体わかると思う。


ネット上の日本語文献はほとんどはkeyCodeとinitKeyboardEvent()を使っていると思うが現在は仲間はずれにされたようだ。
KeyboardEvent.keyCode - Web APIs | MDN
KeyboardEvent.initKeyboardEvent() - Web APIs | MDN

e.preventDefault();

はイベントを取り消すものだ。この場合だと入力をなかったことにする、要はキーを打ったはずなのに文字が出てこないということ。

document.dispatchEvent(new KeyboardEvent("keydown",{
    key: "a"
}));

で情報を作成し、新しくイベントを発信・発火(?)する。*1


あとは始めのコードに

var keys = [];
keys[e.key] = true;

を加えるとキーを長押ししても連続して実行することはない

*1:再帰関数っぽい