バーチャルキーボードの操作

こんぬづわ。

今日は、今作っている「書いたコードをタイピングゲームにして遊べる」Webアプリの中のバーチャルキーボードについてです。

もしかしたらCanvasとかで実装した方がよかったのかもしれませんが、とりあえずHTML＆CSSで出来ています。

シフトキーが押された時の文字の切替え

良く見ると、シフトキーを押したときにキーの文字が入れ替わってますが、実はこれもCSSで表現しています。

HTML(一部抜粋)

<table id="keyboard">
    <tbody>
        <!-- 1行目 -->
        <tr>
          <td>
            <div></div>
            <div><span>!</span><span>1</span></div>
            <div><span>"</span><span>2</span></div>
            <div><span>#</span><span>3</span></div>
            <div><span>$</span><span>4</span></div>
            <div><span>%</span><span>5</span></div>
            <div><span>;</span><span>6</span></div>
            <div><span>'</span><span>7</span></div>
            <div><span>(</span><span>8</span></div>
            <div><span>)</span><span>9</span></div>
            <div><span>0</span><span>0</span></div>
            <div><span>=</span><span>-</span></div>
            <div><span>~</span><span>^</span></div>
            <div><span>|</span><span>\</span></div>
            <div></div>
          </td>
        </tr>
        <!-- 2行目… -->
        ...
    </tbody>
</table>

CSS

/* 通常時 */
#keyboard td span:first-child {
    display: none;
}

/* シフトキーが押された時 */
#keyboard.onShift td span:first-child {
    display: inline !important;
}
#keyboard.onShift td span:last-child {
    display: none !important;
}

シフトキーが押された時、JavaScript側から一番外側の#keyboardに'onShift'というクラスを付けます。
CSSでは、クラスの有無によって中の文字が切替わるように指定しています。
思い付きの実装なので、もっと良い(速い)方法があれば教えてください＞＜