jquery - 4 つの数字ごとにスペースを空ける

Question

16 個の数字に制限されている入力ボックスがあります。美学のためにやりたいことは、4つの数字ごとにギャップを配置することです.

例えば。人が入ると

1234567891234567

このように見えるはずです

1234 5678 9123 4567

JQueryのキーアップでこれはどのように可能でしょうか?

Answer 1

別の解決策は次のとおりです。

$(function() {

    $('#my-input')
    .blur(function() {
        var value = $(this).val();
        value = value.match(/.{1,4}/g).join(" ");
        $(this).val(value);
    })
    .focus(function() {
        var value = $(this).val();
        value = value.replace(/\s/g, '');
        $(this).val(value);
    });

});

その動作中のjsFiddleを見ることができます。

focusより使いやすくするためにイベントを追加しました。総括する：

• ぼかし時 (つまり、入力を離れるとき): 4 文字ごとに分割します。
• フォーカス時 (つまり、入力の編集時): 以前に追加された空白を削除します。

Answer 2

モジュラス関数を利用できます：

$("input").keyup(function(){
        var $this = $(this);
        if ((($this.val().length+1) % 5)==0){
            $this.val($this.val() + " ");
        }
    });  

-- デモを見る --

ただし、少しバグがありますが、良い出発点になる可能性があります。

他のユーザーが言及しているように、これはユーザビリティーにとって良くないため、4 つのテキスト ボックス (長さが常に 16 の場合) を使用し、次のようなものを使用するのが最善です。

$("input").keyup(function(){
        var $this = $(this);
        if ($this.val().length>=4){
         $this.next().focus();   
        }
    }); 

-- デモを見る --

繰り返しますが、少しバグがあるかもしれません。別の方法を指摘しているだけです。

Answer 3

複数のテキストボックスに入れることを検討している場合は、以下の解決策を試してください。

$(function() {
    var charLimit = 4;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

以下の特徴があります。

1. 次の入力への自動タブ
2. 数値のみ
3. charLimit - 異なる長さに設定する

デモ: http://jsfiddle.net/skram/qygB2/20/

Answer 4

キーアップで完了

$('#textbox').on('keyup', function(e) {
    var val = this.value;
    if (e.which != 8 && e.which != 46) {  // handle delete and backspace
        if (val.replace(/\s/g, '').length % 4 == 0) {
            $(this).val(val + ' ');
        }
    } else {
        $(this).val(val);        
    }
})

デモ

Answer 5

ここにあなたが考慮したいかもしれない別の解決策があります

OnBlur = function()
{
    var value = $('#txtName').val().replace(/\s/g, "");
    var numberOfSpaces = Math.ceil(value.length / 4)-1;
    while(numberOfSpaces >0)
    {
        value = value.substr(0,numberOfSpaces*4) + ' ' + value.substr(numberOfSpaces*4);
        numberOfSpaces--;
    }
}

Answer 6

このようなもの

$('input').keyup(function(){
    var val = $(this).val();
    if(val.length >= 4){
        $(this).next().focus();
    }
});

編集:あなたの例は上記の例ほど良くないので、代わりにこれを追加しました。