<input type="time">で全角入力するとフォーカスが外れてしまう

Question

タブキーでフォーカスを移動させて(もしくは前のinputタグ入力でフォーカスをjavascriptで移動させて)、input[type=time]タグに全角で文字入力をしようするとフォーカスが外れてしまい、他のinputタグにフォーカスされてしまいます。
javascriptなどを利用して、フォーカスを外さずに全角から半角にする何かいい方法が方法がありますでしょうか？
ご教示頂ければ幸甚です。

<input type="text" name="name">
<input type="time" name="time">

Answer 1

ブラウザによって挙動が変わるようには思いますけど、全角が受け入れられないのはブラウザの仕様によるものなので、
全てのブラウザで同じように　ということでしたらtype=textにして入力チェックで
全角入力時はNGとしたら良いのでは。
ユーザー入力値を自動で変換するのはあまり良いやり方ではありません。

Comments

[k.t.est]

ご回答有難う御座います。ブラウザはChromeで固定なのですが、やはりtype=textにするのがいいのでしょうか？手前のinputタグで名前を入力するため、ユーザーの入力初期値が全角になっている為、全角入力でも受け入れられる方法にしないとUX上よくないと考えているのですが、それでも自動変換はよくない方法でしょうか？ご教示頂けますと幸甚です。

[m.ts10806]

自動変換はどのような理由があっても良くありません。
UX上と言われるのでしたら勝手に変換される方がユーザーは戸惑うのではないかと。
もちろん補足として「半角のみ」など入力を制限するような文言を入れておくことは必須です。
後やり方としては今回のようなtimeでしたらreadonly属性を引いてtimepickerを導入して選ばせるというのもありです。

いずれにしてもサーバーサイドでの入力チェックは必須です。
※例え制御しようとしてもブラウザ開発ツールなどから改ざんして全角を送り込むことは可能だからです

[k.t.est]

timepickerにて対応することに致します！有難う御座いました。