自動フォーカス遷移時にどのような仕様にするべきか

質問

住所等の入力欄に規定の文字数が入力された時に次の入力欄に自動でフォーカス遷移をする実装を作ったのですが、
規定文字数が入力されてるボックスにShift+Tabで戻り遷移をしようとすると、一旦フォーカスが戻った後にキーを離したタイミングで次の項目に遷移してしまう挙動となってしまいます。
javascriptを用いた自動遷移を紹介してるブログの例でも同様の挙動となっていますが、これはユーザービリティの観点としてあまりよくないのでは無いかと個人的に感じてしまいます。
かといってTabとShiftをそのボックス内で入力された時は無効としてしまうと、逆に次の項目にTabで遷移したい時に反応しなくなってしまいます。

何か良い解決策はないでしょうか？
参考したサイトは以下になります。
http://wakalog.hatenadiary.jp/entry/2017/11/02/131504
https://web-designer.cman.jp/javascript_ref/keyboard/nextfield/

回答No.1

babu_baboo

<p>
<input name="fuga" placeholder="?">
<input name="hoge" placeholder="3桁の数字" pattern="\d{3}"> -
<input name="hoge" placeholder="4桁の数字" pattern="\d{4}">
<input name="fuga" placeholder="?">
</p>

<script>
class A {
　constructor (...args) {
　　this.elements = args;
　　this.tw = document.createTreeWalker (
　　　document,
　　　NodeFilter.SHOW_ELEMENT,
　　　e=> ['INPUT', 'SELECT', 'TEXTAREA'].includes (e.nodeName)
　　　　? NodeFilter.FILTER_ACCEPT　　　　//type: hidden, display:none ?
　　　　: NodeFilter.FILTER_SKIP
　　);
　　document.addEventListener ('input', this);
　}

　move (e) {
　　this.tw.currentNode = e;
　　if (e = this.tw.nextNode ())
　　　e.focus ();
　}

　handleEvent ({target: e}) {
　　if (this.elements.includes (e))
　　　if (! e.validity.patternMismatch)
　　　　this.move (e);
　}

}

new A (...document.querySelectorAll ('input[name="hoge"]'));
</script>