ユーザーがテキスト入力フィールドを動的に入力しています

Question

私はtext_field_tagを持っています。これはユーザーが金額を入力できるようにしています。ユーザーが入力中にこの値を動的にフォーマットするにはどうすればよいですか？たとえば、ユーザーが「5000」と入力すると、「5,000」と表示されます。

Answer 1

あなたは簡単な方法でそれを考えるならば、私達はちょうどフォーマットさ値と現在のvalを置き換えることができます。この場合、forループを複数回使用しても（フォーマットとデフォーマッティングの間で）パフォーマンスは高価ではありません。我々は右から一致/テキストを見つける必要があるため、テキストを置き換えるための

、私は、我々は、最初のテキストを逆に正規表現の置換を適用する必要があると思うので、正規表現を使用するために、正規表現を使用していないと結果を元に戻します。これは単純にループしたり置換したりするよりはるかに悪いことです。

HTML：

<input type="text"/> 
<button> Show value </button> 

JS：

var format = function(text) { 
    var f = ""; 
    for(var i = text.length - 1; i >=0; i--){ 
    f = text[i] + f; 
    var k = text.length - i; 
    if(k % 3 == 0 && i > 0){ 
     f = "," + f; 
    } 
    } 
    return f; 
} 
//defomratting the text to get the actual value 
var deformat = function(text) { 
    return text.replace(/,/g, ""); 
} 

$("input").on("input", function(e){ 
    var s = this.selectionStart; 
    var rawVal = $(this).val(); 
    var clen = rawVal.length; 
    val = deformat(rawVal); 
    var f = format(val); 
    s += f.length - clen; 
    $(this).val(f); 
    //set the selection to ensure that it's not changed during typing. 
    this.selectionStart = this.selectionEnd = s; 
}); 

$("button").click(function(){ 
    alert(deformat($("input").val())); 
}); 

Demo

ここ

コードです

Answer 2

本当に簡単に統合できるJquery Mask Pluginを使用すると、たくさんのマスクを使用できます。また、時間のsavaトンです。 すなわち

$('.money').mask('000.000.000.000.000,00', {reverse: true}); 

https://igorescobar.github.io/jQuery-Mask-Plugin/