Chromeで<input type="date">にIMEを通して入力しようとすると、フォーカスが外れる問題

Question

困っていること

Chromeで、<input type="date">にIMEを通して入力しようとすると、入力できない上、フォーカスが外れてしまい困っています。ポイントとしては、以下の通りです。

• <input type="date">にIMEがoffの状態で進入すると、「半角／全角」キーを押してもIMEはonにならない（←別に問題はない）。言語バーからIMEをonにすることはできる（←別に問題はない）。
• <input type="date">にIMEがonの状態で進入すると、IMEの状態はそのまま（←別に問題はない）。
• <input type="date">にIMEがonの状態で文字キーを押下すると、入力ができない（←別に問題はない）。そして、前の（フォーカスが当たる）要素にフォーカスが移る（←困る）。

<input type="time">でも同様の問題が起こるようで、過去にteratailに質問がありました<input type="time">で全角入力するとフォーカスが外れてしまう。解決済みとなっていますが、私の問題意識は少し違うところにあるので、似たような質問ですが投稿させていただきました。

私としては、「フォーカスが外れる」ところをどうにかしたいです。IMEを制御したりする必要はありません。IMEがonで入力しようとすると、「入力はできず、何も起こらない」でいいのです。その実現方法をご教授いただきたく思います。

考えられる解決策

• UI系ライブラリを利用する。

→それだけのために導入するのは抵抗があります。カレンダーピッカーだけ導入したら見た目も統一的でなくなりますよね。見た目だけならCSSでどうにでもなりますが、値取得の方法などが他のinput要素と異なったりすると、コードがちぐはぐになりそうです。

• <input type="text">にして、バリデーションで日付判定。

→カレンダーピッカーなど、<input type="date">の機能が使えなくなるのは困ります。

• onkeydownイベントで、event.keyCodeが229（IMEがon）のときに、どうにかする。

→本命だと思いますが、フォーカスを移さない方法がわかりません。event.preventDefault()ではダメでした。

Answer 1

Chrome 84 から治っているようです。

Issue 1034854: If you click 'input date' without confirming ime input with 'input text', it will be entered into 'input text'

Answer 2

とりあえず戻らなくしてみた。（.hiddenのフィールド上に無駄文字列が入りますが）

<input type="text" class="hidden">
<input type="date">
<input type="text">
<input type="text">
<input type="date">
<input type="date">
<input type="date">

.hidden {
  opacity: 0;
}

document.addEventListener( 'DOMContentLoaded', function() {
	var n = document.querySelector( '.hidden' );
	document.querySelectorAll( '[type="date"]' ).forEach( function( e ) {
		var f = true;
		e.addEventListener( 'focus', function() {
			if ( !f ) {
				f = true;
				return;
			}
			n.focus();
			f = false;
			e.focus();
			console.log( '[type="date"]' );
		} );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/03jn1872/](https://jsfiddle.net/03jn1872/)

Comments

[7Kreuz]

.hiddenを用意するのは良さそうですね
ただ、フォーカスが外れてしまうことには変わりないようです

[kei344]

https://jsfiddle.net/svo72gna/
フォーカスが戻るようにだけ改修。

[7Kreuz]

なるほど！
setTimeoutを使うより良さそうですね。
私では思いつかない方法で、とても参考になりました。

Answer 3

頂いたお二人の回答をもとに、.hiddenなinputを用意してこんな感じにしようかと検討中です

document.addEventListener('DOMContentLoaded', function() {
  var n = document.querySelector('.hidden');
  document.querySelectorAll('[type="date"]').forEach(function(e) {
    e.addEventListener('keydown', function(e2) {
      if (e2.keyCode === 229) {
        n.focus();
        setTimeout(() => e.focus(), 1);
      }
    });
  });
});

ただ、もう一声ほしい（.hiddenのinputはできればないほうがいいし……）ので、もう少しオープンにしておきます

Answer 4

無理やり戻してみるとか。ちょっとちらつくかもしれません。

  document.getElementById('target').addEventListener('keydown', event => {
    if (event.keyCode === 229) {
      setTimeout(() => event.target.focus(), 1);
    }
  });

Comments

[7Kreuz]

フォーカスは戻るのですが、直前のinputに意図しない文字が入力されてしまいます