スマホでinput要素のフォーカス時にキーボードを表示させない方法【readonly属性】

2020/03/16

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

スマホでinput要素をタップした時に出てくるキーボードを非表示にしたい
jQueryのdatepickerやdatetimepickerをinput要素に設置していて、タップした時に表示されるキーボードが邪魔で操作性が悪くなって困っている

という方のお悩みを解決します！

この記事で紹介する「readonly属性を設定する方法」を実践すれば、任意のinput要素のフォーカス時のみソフトウェアキーボードを非表示にすることができ、ユーザービリティの向上につながります！

それでは対処法を見ていきましょう〜

readonly属性を設定して解決

以下のようにinput要素のreadonly属性を設定することで、タップ時のキーボードを非表示にすることができます。

readonly属性の指定方法

<input type="text" name=""  id="datetimepicker" readonly="readonly">

MEMO

readonly属性はそのinput要素を読み取り専用にする属性です。

input要素にdatepickerなどを設置する場合にお使い下さい〜！

「jquery.datetimepicker.jsを公式サイトの説明通り設定したのにエラーが出て動作しなくて困っている…」

という方は以下の記事で解説していますのでチェックしてみてください〜！