入力欄の内容を削除した際に後ろの入力欄にフォーカスさせる

Question

前提・実現したいこと

お世話になっております。
inputタグ４つを使って暗証番号の入力画面を作りたいのですが、
入力された際に次のinputの入力欄にフォーカス動きは以下のコードで実装でき、
次に入力内容を削除した際に、前のinput入力欄にフォーカスさせるという動きを実装したいのですがエラーが出てしまいます。
どこが間違っているかご指摘いただけますと有り難いです。

<input type="password" name="password" id="password01" maxlength="1" onkeyup="moveOnMax(this,'password02')">
<input type="password" name="password" id="password02" maxlength="1" onkeyup="moveOnMax(this,'password03')">
<input type="password" name="password" id="password03" maxlength="1" onkeyup="moveOnMax(this,'password04')">
<input type="password" name="password" id="password04" maxlength="1">

moveOnMax = function (field, nextFieldID) {
    if (field.value.length == 1) {
      document.getElementById(nextFieldID).focus();

    }

試したこと

moveOnMax = function (field, nextFieldID,prevFieldeID) {
    if (field.value.length == 1) {
      document.getElementById(nextFieldID).focus();
    } else if (field.value.length < 1) {
      document.getElementById(prevFieldID).focus();
    }
  }

<input type="password" name="password" id="password01" maxlength="1"
            onkeyup="moveOnMax(this,'password02','password01')">
<input type="password" name="password" id="password02" maxlength="1"
            onkeyup="moveOnMax(this,'password03','password01')">
<input type="password" name="password" id="password03" maxlength="1"
            onkeyup="moveOnMax(this,'password04','password02')">
<input type="password" name="password" id="password04" maxlength="1"
            onkeyup="moveOnMax(this,'password04','password03')">

入力後、次のフィールドへのフォーカスすることができなくなりました。
また、エラーは無くなりましたが、else ifの方にconsole.logでprevFieldeIDを出力すると、入力した際にもコンソールにprevFieldeIDの値が出力されてしまっています。
else ifの内容も else if (field.value.length < 1)に変えたのですが、このif分の指定がそもそも間違っているのでしょうか？

Comments

[int32_t]

エラーが出るのはどういうタイミングですか? 1番目のフィールドでキーを離したとき?

[..o]

一番左のフィールドに入力した際と二番目に入力した際、三番目、二番目、一番目を削除した際にこのエラーが出ます。

Answer 1

フィールドの値を削除した際のエラーは、

  let prevFieldeID = Number(prevFielde-2);
  document.getElementById("password0" + String(prevFieldeID - 2)).focus();

このコードで、引数のnextFieldIDの末尾の数値から合計4を減じているのが原因です。2を減じる意図でしょう。

入力した際のエラーの原因はぱっと見てわかりませんが、開発者ツールでステップ実行してみたり、2つある document.getElementById() の行の前でその引数をconsole.log()で確認してみると何かわかりそうです。

自分なら、「nextFieldIDから2を引いて前のフィールドIDを求める」という設計にはせず、「moveOnMax()に新たにprevFieldID引数を足す」とか、「DOMツリー上の前後のinput[type=password]を探す」とかすると思います。

Comments

[..o]

ご回答ありがとうございます。
確かに新しい引数を渡した方が早いですね。視野が狭くなっておりました。ありがとうございます。

Answer 2

String(prevFieldeID - 2)はNumber(prevFielde-2)で既に2引いているので、String(prevFieldeID)でいいのでは？　と思いました。

Comments

[..o]

ご回答ありがとうございます。
申し訳ありません、いろいろ試していたので重複しました。
修正したところ、入力した後次のフィールドにフォーカスする動きも止まってしましました。

[Lhankor_Mhy]

質問の変更拝読。当方の環境では「入力した後次のフィールドにフォーカスする動きも止まって」という問題は再現しませんでした。

ご提示いただいていない部分のコードが原因かと思います。

[..o]

ありがとうございます。もう一度確認してみます。

Answer 3

コードのどこかが間違っていた様で、皆様にご回答いただいたコードで通りました。ありがとうございます。