テキストボックスに入力中にコンマを追加する

Question

私はテキストフィールドを持っています。私はテキストボックスに数字を書いています。私が書いている間、私は千のセパレータを追加したい。時々

function addComma(id){ 
$("#"+id).keyup(function(event) { 

    // skip for arrow keys 
    if(event.which >= 37 && event.which <= 40) return; 

    // format number 
    $(this).val(function(index, value) { 
    return value 
    .replace(/\D/g, "") 
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
    ; 
    }); 
}); 
} 

これだけ作品：

HTML：：

<input type="text" name= "name1" id="id1" onclick="addComma('id1');"> 
<input type="text" name= "name1" id="id2" onclick="addComma('id2');"> 

jQueryの私は、この解決策を見つけました。カンマがまったく表示されないことがあります。

私のコードで何が問題なのか教えてください。

Answer 1

は、テキストボックスに入力中にカンマを追加するソリューションです。これを試してみてください。すべての入力に対してkeyupイベントをトリガーする必要があります。

$('input').keyup(function(event) { 
 
    // skip for arrow keys 
 
    if(event.which >= 37 && event.which <= 40) return; 
 

 
    // format number 
 
    $(this).val(function(index, value) { 
 
     return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name= "name1" id="id1"> 
 
<input type="text" name= "name1" id="id2">

Answer 2

blurイベントで入力の値を書式設定することをお勧めします。ユーザーの入力時にこれを行うと、予期せぬ動作となり、混乱を招く可能性があります。

また、HTMLに重複しているid属性が無効であり、jQueryとJSが奇妙に混在していることにも注意してください。時代遅れのon*イベント属性を削除し、代わりに控えめなイベントハンドラを使用する必要があります。ここで

$('.foo').blur(function() { 
 
    $(this).val(function(i, v) { 
 
    return v.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="name1" id="id1" class="foo" /> 
 
<input type="text" name="name2" id="id2" class="foo" />