【JQuery】スマホ・タブレットでも使える、ひらがなソフトウェアキーボードを作ってみた

Javascript, 開発

おはようございます。

今日はまた久しぶりに JQuery の話し。
まあ JQuery じゃなくてもいいんですが、簡単に実装できちゃうので使いますよね。

スマホやタブレットでは入力欄にフォーカスすると端末のキーボードが出てきますが、
それがちょっと使いにくい画面なんかでは自前でキーボードを実装した方がいい場合がありますよね。

スポンサーリンク

画面

こういった感じの、クリックして要素を表示する(メニューなど)ような動作を実現する場合は、
リスト要素(ul,li)を使うことが多いのですが、ちょっと自分が使いたい場面はテーブルの方が都合がよかったので。

常に全ての文字を表示しないのも、画面が狭い場合を考慮してのものです。

css

 

html

画面は、Bootstrapでちょっと見やすい感じにました。

 

スクリプト

javascript

サンプルイメージ

初期表示
初期表示

初期表示。
各行の頭文字を横並びに表示。

行選択
行選択

試しに「た」をクリック、た行が表示される。

文字選択
文字選択

た行の中から「と」を選択、テキスト欄に入力される。

そのほか、濁音、半濁音、小文字、バックスペースに対応。

まとめ

結構使いどころは難しいかもしれませんが、
何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ