【jQuery】inputタグのreadonlyでハマった話

こんにちは。

もう2年以上も放置しておりました。。

チョコチョコと備忘録を書いていこうと思います。

ということで久しぶりの投稿はinputタグでハマった件。

datepickerで直接入力できない様にしたい

そもそものやりたかったことは、必須項目のデータピッカー入力欄で、直接入力をできない様にすること。

というのも、設置していたデータピッカーは土日祝などは選択できない様にしていたのですが、直接入力されてしまい対応不可の日時の問い合わせが来たとのこと。

そこまでは想定していなかった。。。

そこで、直接入力ができない様にinputタグに「readonly」を追加。

送信テストをしてみると、確認画面から戻った際に日付が消えてしまう。
どうやら、readonlyのせい。

そして、肝心の必須項目も効いていない。。。

調べてみると、requiredとreadonlyは一緒に使えないとのこと。

解決策はこちら。

html

<input id="datepicker" type="text" name="days" required>

jQuery

<script>
$(function() {
// inputにフォーカス時、readonlyに変更
  $('#datepicker')
    .focusin(function(e) {
      $(this).attr('readOnly', 'tlue');
    })
    .focusout(function(e) {
      $(this).removeAttr('readOnly');
    });
});
</script>

該当のinputタグにフォーカスしたら、readonlyを追加。
フォーカスが外れたらreadonlyを削除。

これでなんとか、直接入力させない必須項目の日付入力欄として機能しました。

1時間以上ハマってたな。

参考になれば幸いです。