【Javascript】入力後に自動で次の入力フォームに移動

自動で次のフォームにカーソルを合わせる

最大入力桁数まで入力したら、自動で次の項目へカーソルを移動します。 クレジットカードの番号入力だったり、郵便番号であったり、フォームに一定の桁数を入力すると、自動で次の項目へ移動できたら操作の手間が省けて便利です。

デモ

銀行コード(4桁)
支店コード(3桁)
口座番号(7桁)

コード

    function nextfeild(str) {
        if (str.value.length >= str.maxLength) {
            for (var i = 0, elm = str.form.elements; i < elm.length; i++) {
                if (elm[i] == str) {
                    (elm[i + 1] || elm[0]).focus();
                    break;
                }
            }
        }
        return (str);
    }

<form name="">
        <label for="bank">銀行コード(4桁)</label>
        <input type="text" size="4" name="bank" id="bank" maxlength="4" placeholder="例:1234" onkeyup="nextfeild(this)"><br>
        <label for="bankid">支店コード(3桁)</label>
        <input type="text" size="3" name="bankid" id="bankid" maxlength="3" placeholder="例:123" onkeyup="nextfeild(this)"><br>
        <label for="banknum">口座番号(7桁)</label>
        <input type="text" size="7" name="banknum" id="banknum" maxlength="7" placeholder="例:1234567" onkeyup="nextfeild(this)"><br>
        <input type="button" value="確認 (移動しません)">
</form>

概要

<input type="text" maxlength="4"> のようにmaxlengthの指定を行います。 これにより、最大文字列まで入力された場合に次input要素へフォーカスなどの動作を実現させます。

また、ｽｸﾘﾌﾟﾄでは

    if (elm[i] == str) {
    (elm[i + 1] || elm[0]).focus();

で最大文字列まで入力された場合に次のform内のエレメント（次が無ければ最初のエレメント）へとフォーカス移動します。

注意事項

日本語入力の場合、ブラウザによってmaxlengthの判定タイミングや、その後の動作が異なる可能性があります。

※ Chrome,IE動作確認済み