[html+jQuery]datepicker導入時にキーボード入力を禁止する方法

やっといたほうが良いと思う。

事例

申込みフォームに面談希望日とかの、日付を入力させる項目を入れるとする。input type=”date”はピーキー過ぎて扱いづらいので除外。

- HTML: HyperText Markup Language | MDN
要素の type="date" は、ユーザーに日付を入力させる入力欄を、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで生成します。

そうするとjQueryのdatepickerが候補に上がる。というか、これを使うのがむしろ一般的くらいのもん。

Datepicker | jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...

datepickerはinputに付与する機能なので、input type=”text”にくっつけるのが一般的。カレンダーから日付を選択した際に出力する内容はjsで制御できるので、スラッシュ区切りにするとか年月日をつけるとか曜日を足すとか、自由度が高い。

で、datepickerを足しただけだとキーボード入力に対応してるせいで、出力形式を決めたところでぶち壊しにすることができてしまう。

スマホで見たときとか、カレンダーのポップアップにキーボードが被って気が付かない可能性とか出てくる。嫌だ、どうすりゃいいんだ、という場合のやつ。

readonlyで解決

inputにreadonlyを付けるとユーザーの入力を禁止する感じになる。

<input type="text" name="" value="" readonly="readonly">
HTML 属性: readonly - HTML: HyperText Markup Language | MDN
readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

「感じ」というのは絶対に操作できないというわけでなく、jsからのアプローチは依然通用するということで。だから、datepickerからのみ入力できるということになる。

contact form 7の場合

contactform7には元々日付タグもあるんだけど、出力されるのはdateなのでやっぱり除外。

datepickerを使うときはclassをつけて指定。

ポップアップ内に項目はないけどreadonlyを追加することは可能。

上記を踏まえてこんな感じで書く。

[text* hopedate class:datepicker readonly]

コード内に「readonly」を追記すれば反映してくれる。

コメント

タイトルとURLをコピーしました