More than 3 years have passed since last update.

【初心者でもわかる】カレンダー系jsを入れた時にスマホで入力欄が邪魔なので非表示にする方法

Posted at 2021-04-20

どうも7noteです。入力するキーパッドを非表示にする方法です。

カレンダー系のjsを入れた場合、PCで検証しただけでは特に問題なさそうですが、
実機のスマホでみると標準のキーパッドが出てしまし、カレンダーの入力がしにくくなってしまいます。

↑キーパッドが表示されて、カレンダーが見にくい。

この対策として、input属性にreadonly="readonly"を指定することでキーパッドがでなくなります。

index.html

<!-- キーパッドを表示させない -->
<input type="text" id="datepicker" readonly="readonly">

readonly="readonly"を指定することで、キーパッドからの入力がされなくなります。
しかし入力自体を完全に不可にしているわけではないので、jsなどでinputの値を操作することができます。

カレンダーは基本的にjavascriptで動いているので、もしjsを無効に設定しているブラウザでは全く操作・入力ができなくなるので注意ください。

似た属性にdisabledがありますが、こちらは完全にinput自体を無効化してしまうのでsubmit等で値の送信ができません。