inputタグの年月入力(type="month")で初期カーソル位置を月にしたい。

Question

Chromeで、以下の様に、input(type="month")タグを記述し年月入力フィールドにフォーカスが移った時には
初期カーソルは『年』にセットされます。
これを『月』にセットする方法を教えて下さい。

HTML
<input type="month" value="2018-07" />

通常は以下の様に初期カーソル位置は『年(2018)』となります。
これを、初期カーソル位置を『月(07)』にしたいのです。

よろしくお願いします。

Answer 1

type=monthはブラウザによって実装が異なるので特殊なことをやるくらいなら
yearとmonthをわけたセレクトボックスなどでやる方がよいのでは？

Comments

[matsurugi]

ブラウザはChrome限定で動作させる仕様となっていますので、Chrome対応での特殊性は問題ありません。
また、既に運用されているWEBシステムのため、見た目を変更できない制限があります。

Answer 2

Shadow DOM で実装されているのですが、ブラウザのものはスクリプトから触ることができません。
しかし、スタイルはある程度コントロールできるため、次のようなCSSを用意してクラス変更によりスタイル適用中にフォーカスを当てれば可能のようです。
Chrome のバージョンアップにより動作しなくなることも考えられるため注意してお使いください。

input.month[type="month"]::-webkit-datetime-edit-year-field {
  visibility: hidden;
}

$('input[type="month"]').addClass('month').focus().removeClass('month');

-- 18:26 追記

$(document).on('focusin', 'input[type="month"]', function(event) {
  var target = $(this);
  if (!target.hasClass('month')) {
    target.addClass('month');
    requestAnimationFrame(() => target.removeClass('month'));
  }
});

Comments

[matsurugi]

返信が遅くなり申し訳ありませんでした。
おかげさまで解決しました。
target.addClass('month');
reruestAnimationFrame(() => target.removeClass('month'));
辺りが何を行っているのか全く理解できていませんので、追々勉強したいと思います。
助かりました、ありがとうございました。