スマホやタブレットのソフトウェアキーボードを表示させないようにする

  • このエントリーをはてなブックマークに追加

キャンセルの方法

スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。


利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。
予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しやすいですね。

ただreadonly属性を付与しただけだと単純にソフトウェアキーボードが立ち上がらないだけなので、jsでテンキーなどを実装する必要があります。


デモ

タッチデバイスでinputをタップすると、テンキーが立ち上がります。(ブラウザの方は開発者モードで確認できます)



簡単にテンキーを作成しました。
inputをタップするとテンキーが立ち上がり、数字を入力して、OKボタンを押すとinputに結果を挿入しています。

サンプルソース

HTML



JS



CSS





森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ