タブごとにsimple-keyboardを用意して、それぞれの可視性を操作しようとした時の備忘録

使ったライブラリ

simple-keyboard
JavaScriptを使っていい感じのキーボードを作れるライブラリ

元々のコード

index.css

.simple-keyboard {
    display: none;
}

/* 生きているタブのキーボードだけ表示したい */
.tab.active .simple-keyboard {
    display: block;
}

index.html

<!-- ライブラリのインポート処理 -->

<div class="tab active">
    <div class="simple-keyboard"></div>
</div>

<div class="tab">
    <div class="simple-keyboard"></div>
</div>

index.js

const Keyboard = window.SimpleKeyboard.default;
const k1 = new Keyboard({});
const k2 = new Keyboard({});

問題

上記のコードだと、キーボードが両方とも表示されます。

解決

ドキュメントにある通り、クラスを分けると解決します。ただし、JS側でクラスとテーマを指定する必要があります。

index.html

<div class="tab active">
    <div class="simple-keyboard-1"></div>
</div>

<div class="tab">
    <div class="simple-keyboard-2"></div>
</div>

index.js

const Keyboard = window.SimpleKeyboard.default;
const defaultTheme = "simple-keyboard hg-theme-default hg-layout-default";
const k1 = new Keyboard(
    ".keyboard1", 
    { theme: defaultTheme }
);

const k2 = new Keyboard(
    ".keyboard2", 
    { theme: defaultTheme }
);