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

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

事例

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

- HTML: ハイパーテキストマークアップ言語 | 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 JavaS...

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

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

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

readonlyで解決

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

<input type="text" name="" value="" readonly="readonly">
HTML 属性: readonly - HTML: ハイパーテキストマークアップ言語 | MDN
readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

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

無効化自体はcssでもやれる。やれるんだけど、これだとdatepickerが発火しないので使っちゃダメ。

.datepicker{
    pointer-events: none;
}

contact form 7の場合

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

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

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

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

[text* hopedate class:datepicker readonly]

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

20230726追記:記述の注意

オプション設定の前に「$.datepicker~」を書いておく。

$(function(){
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $('.datepicker').datepicker({
        minDate: 1,
        numberOfMonths: 1,
        dateFormat: 'yy年mm月dd日(D)',
    });
});

これを入れなくても動くっちゃ動くんだけど、CSPとかセキュリティ周りをいじると動かなくなる。

後から修正するのもだるいんで、必ず入れる癖をつける。

コメント

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