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

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

キャンセルの方法

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


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

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


デモ

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



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

サンプルソース

HTML



JS



CSS





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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

森島

執筆者: 森島

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