web-dev-qa-db-ja.com

maxlength値に達したら、次の入力にフォーカスします

前の入力がmaxlength値に達したら、次の入力に焦点を合わせるにはどうすればよいですか？

a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />

ユーザーがmaxlengthより大きいテキストを貼り付ける場合、理想的には次の入力にこぼれるはずです。

jsFiddle：http://jsfiddle.net/4m5fg/1/

既に存在するものを使用するよりも、この背後にあるロジックを学習したいので、プラグインを使用したくないを強調する必要があります。理解に感謝。

javascriptjqueryiterationcounter
29
O P

JQueryは使用されておらず、非常にクリーンな実装です。

  • Maxlength属性から読み取ります。
  • コンテナ内の任意の数の入力にスケールします。
  • フォーカスする次の入力を自動的に見つけます。
  • JQueryはありません。

http://jsfiddle.net/4m5fg/5/

<div class="container">
a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />
</div>

..

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement || e.target;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() === "input") {
                next.focus();
                break;
            }
        }
    }
    // Move to previous field if empty (user pressed backspace)
    else if (myLength === 0) {
        var previous = target;
        while (previous = previous.previousElementSibling) {
            if (previous == null)
                break;
            if (previous.tagName.toLowerCase() === "input") {
                previous.focus();
                break;
            }
        }
    }
}
46
Joseph Lennox

フィールドの入力を監視し、その値をテストできます。

$("input").bind("input", function() {
    var $this = $(this);
    setTimeout(function() {
        if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
            $this.next("input").focus();
    },0);
});

作業デモ 。

setTimeoutは、入力が完了して値が更新された後にのみコードが実行されることを保証するためにあります。 inputをバインドすると、キーの押下、コピー/貼り付け（マウスからでも）、ドラッグアンドドロップ（この場合、フォーカスはドラッグ可能ではなく、ドロップ可能）。

注：一部の古いブラウザでは、propertychangeもバインドする必要がある場合があります。

ユーザーがmaxlengthより大きいテキストを貼り付ける場合、理想的には次の入力にこぼれるはずです。

そのためには、JavaScriptを使用してmaxlength属性を削除し（完全な入力をキャプチャできるようにするため）、自分でその機能を実装する必要があります。 小さな例 、以下の関連部分を作成しました：

$("input").each(function() {
    var $this = $(this);
    $(this).data("maxlength", $this.prop("maxlength"));
    $(this).removeAttr("maxlength");
})

これにより、属性は削除されますが、 data に保存されるため、後でアクセスできます。

function spill($this, val) {
    var maxlength = $this.data("maxlength");
    if ( val.length >= maxlength ) {
        $this.val(val.substring(0, maxlength));
        var next = $this.next("input").focus();
        spill(next, val.substring(maxlength));
    }
    else
        $this.val(val);
}

ここでは、最大長のロジックがJavaScriptに再導入され、「破棄された」部分を取得して、spillの再帰呼び出しで使用しています。次の要素がない場合、dataの呼び出しはundefinedを返し、ループが停止するため、入力は最後のフィールドで切り捨てられます。

25
mgibsonbr

プレーンなJavaScriptを使用できます。

[〜＃〜] demo [〜＃〜] を参照してください。

_el.value.length_で文字の長さを確認してください。最大値と等しい場合は、focus()を使用して次のフィールドに移動します。 onkeyupを使用してこの関数をキーアップイベントにバインドし、ユーザーが文字を入力した後に関数が起動するようにします。

_var a = document.getElementById("a"),
    b = document.getElementById("b"),
    c = document.getElementById("c");

a.onkeyup = function() {
    if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
        b.focus();
    }
}

b.onkeyup = function() {
    if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
        c.focus();
    }
}
_
6
Antony

あなたが多くのフィールドを持つつもりなら、あなたはこのような何かをすることができます。

基本的にkeyupで入力の長さを取得し、それをmaxlengthと比較し、一致する場合はfocusで次の入力フィールドに入力します。

http://jsfiddle.net/btevfik/DVxDA/

$(document).ready(function(){
    $('input').keyup(function(){
        if(this.value.length==$(this).attr("maxlength")){
            $(this).next().focus();
        }
    });
});
5
btevfik

カード（デビット/クレジット）番号入力タイプの作成に重点を置いている場合。次に、次のように管理しやすいjQueryバージョンをクリーンアップします。

/*..............................................................................................
* jQuery function for Credit card number input group
......................................................................................................*/
            // make container label of input groups, responsible
            $('.card-box').on('focus', function(e){
                $(this).parent().addClass('focus-form-control');
            });
            $('.card-box').on('blur', function(e){
                $(this).parent().removeClass('focus-form-control');
            });
            $('.card-box-1').on('keyup', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr('maxLength'));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $('.card-box-2').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
                if(_length <= 0){
                    return;
                }
            });
            $('.card-box-2').on('keyup', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr('maxLength'));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $('.card-box-3').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
                if(_length <= 0){
                    $('.card-box-1').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
            });
             $('.card-box-3').on('keyup', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr('maxLength'));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $('.card-box-4').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
                if(_length <= 0){
                    $('.card-box-2').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
            });
            $('.card-box-4').on('keyup', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr('maxLength'));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    return;
                }
                if(_length <= 0){
                    $('.card-box-3').focus().removeAttr('readonly');
                    $(this).attr('readonly', 'readonly');
                }
            });
/*..............................................................................................
* End jQuery function for Credit card number input group
......................................................................................................*/
/* Hide HTML5 Up and Down arrows. */
                                input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
                                    -webkit-appearance: none; margin: 0;
                                }
                                input[type="number"] { -moz-appearance: textfield; }
                                .card-box {
                                    width: 20%; display: inline-block; height: 100%; border: none;
                                }
                                
                                .focus-form-control {
                                    border-color: #66afe9; outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
                                        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
                                }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-control" style="padding: 0; max-width: 300px; ">
                                        <input class="card-box card-box-1" type="number" id="CreditCard_CardNumber1" required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'');this.value=(this.value < 1) ? ('') : this.value;"/> 
                                        <input class="card-box card-box-2" type="number" id="CreditCard_CardNumber2" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'');this.value=(this.value < 1) ? ('') : this.value;" />
                                        <input class="card-box card-box-3" type="number" id="CreditCard_CardNumber3" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'');this.value=(this.value < 1) ? ('') : this.value;" />
                                        <input class="card-box card-box-4" type="number" id="CreditCard_CardNumber4" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'');this.value=(this.value < 1) ? ('') : this.value;" />
                                    </div>
0
irejwanul

確認済み回答には、前のフィールドに有効な長さがある場合に前のフィールドにフォーカスする問題が1つあります

前のタグの完全な長さを修正するために上記の回答を変更しました

var container = document.getElementsByClassName("container")[0];
    container.onkeyup = function(e) {
    var target = e.srcElement || e.target;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() === "input") {
                next.focus();
                break;
            }
        }
    }
    // Move to previous field if empty (user pressed backspace)
    else if (myLength === 0) {
         var previous = target;
       // Move to previous field if backspace is pressed
        if (code == 8) {
            previous = previous.previousElementSibling;
            if (previous != null) {
                if (previous.tagName.toLowerCase() === "input") {
                    previous.focus();
                }
            }
        } else {
            while (previous = previous.previousElementSibling) {
                if (previous == null)
                    break;
                if (previous.tagName.toLowerCase() === "input") {
                    var mLength = parseInt(previous.attributes["maxlength"].value, 10);
                    var pMyLength = previous.value.length;
                    // Move to previous field if it does not have required length
                    if (mLength == pMyLength) {
                        break;
                    } else {
                        previous.focus();
                        break;
                    }
                }
            }
        }
    }
}
0
Babir

更新されたbtevfikコード、Onkeyupまたはonkeydownはタブナビゲーションで問題を作成します。 maxlengthに制限されるため、入力ボックス内のテキストを編集または変更するのは困難です。そのため、oninputイベントを使用してタスクを達成できます。

[〜＃〜] demo [〜＃〜]

[〜＃〜] html [〜＃〜]

<ul>
<li>a: <input type="text" maxlength="5" /></li>
<li>b: <input type="text" maxlength="3" /></li>
<li>c: <input type="text" maxlength="5" /></li>
<li>d: <input type="text" maxlength="3" /></li>
<li>e: <input type="text" maxlength="6" /></li>
<li>f: <input type="text" maxlength="10" /></li>
<li>g: <input type="text" maxlength="7" /></li>
</ul>

Javascript

$(document).ready(function(){
    $('input').on("input", function(){
        if($(this).val().length==$(this).attr("maxlength")){
            $(this).next().focus();
        }
    });
});

[〜＃〜] css [〜＃〜]

ul {list-style-type:none;}
li {padding:5px 5px;}
0
Surya R Praveen

入力テキストフィールドを動的に追加する場合は、これを試すことができます。

これにより、スクリプトがDOMに再挿入され、完全に機能します。

$('body').on('keyup', '#num_1',function(){
  if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
    $('#num_2').focus();
  }
})
$('body').on('keyup','#num_2', function(){
   if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
    $('#num_3').focus();
  }
})
<input type="text" class="form-control" name="number" maxlength="3" id="num_1">
<input type="text" class="form-control" name="number" maxlength="3" id="num_2">
<input type="text" class="form-control" name="number" maxlength="4" id="num_3">
0
Sri Sri M