LibKeyというライブラリです。
言語はJavascriptです。
Githubに公開しています。
libkey.jsが開発用ファイルで、libkey.min.jsが圧縮(?)したファイルです。
サンプルプログラム(index.html)にVue2を使っているのでNoticeに記述しています。
ライセンスはApache License 2.0です。
仕組み
形式はクラスです。場所はwindow.libkeyです。
クラスなのでこのように使います。
let KeyInput = new libkey();
クラスのコンストラクタではまず、addEventListenerでキーボードイベントを追加してキーボードの入力を監視(?)します。
constructor(){
document.addEventListener("keydown",e=>{
if(e.key && !this.isPress(e.key)
&& e.key.length === 1) this.pressKeyArray.push(e.key)
this.#setmeta(e,true)
})
document.addEventListener("keyup",e=>{
if(e.key) this.pressKeyArray.splice(
this.pressKeyArray.indexOf(e.key) )
this.#setmeta(e,false)
})
}
このコードは、isPressメゾッドで既に入力の変数に設定されているかを確認してから、入力の変数に追加しています。
そのあとにエンターキーなどの少し特殊なキーの設定を#setmeta関数に丸投げします。
使い方
変数
クラスのインスタンスを作ると、中身の変数はこのようなものがあります
- pressKeyArray
- isPressEtcKey
- ondown
- onup
キー入力状態変数
pressKeyArrayは、今入力されている英数字・記号(正確にはKeyboardEvent.keyの値が一文字になる入力)の配列です。
KeyboardEvent.keyに関してはこちらをご参照ください。
["a", "@", "1"] //これはA、@、1が同時押しされている状態です。
isPressEtcKeyは、その他Ctrlキー、Altキーなどの少し特殊なキーが押されているかをBooleanで保存しています。
中身はこのようになっています。
isPressEtcKey = {
upArrow:false, //上矢印キー
downArrow:false, //下矢印キー
leftArrow:false, //左矢印キー
rightArrow:false,//右矢印キー
enter:false, //エンターキー
space:false, //スペースキー
alt:false, //Altキー
ctrl:false, //Ctrlキー
shift:false //Shiftキー
}
もちろんtrueが押されている状態で、falseが押されていない状態です。
イベント変数
ondown変数は、キーボードが押されたときに実行するイベント関数です。
初期値はe=>eです(エラー防止のため)
代入はこのようにします。
let KeyInput = new libkey();
KeyInput.ondown = e => {
console.log(e);
}
渡される引数のeは、KeyboardEvent.keyの値です。
onup変数は、キーボードから指が離された(?)ときに発生します。
引数はondown変数と同じです。代入方法もondownと同じです。
サンプルプログラム(手抜き)
<p>Ctrlキーを押すと直前に押したキーをアラートするよ！</p>
<script src="libkey.js"></script> <!--libkeyライブラリ本体-->
<script src="script.js"></script>
let keyinput = new libkey(); //ライブラリの初期化
let lastInput = "";
keyinput.ondown = e => {
if(keyinput.isPressEtcKey.ctrl){
alert(lastInput);
}else{
lastInput = e;
}
}
修正案がありましたらGithubやコメントで教えてほしいです。
最後まで見てくれてありがとうございました。