HTML 5通貨形式

Question

私は自分のページにたくさんのHTML 5入力コントロールを使用しています。私の要件の1つは、通貨機能付きのテキストボックスを持つことです。このために私はこの試みた：

<input type="number" pattern="(d{3})([.])(d{2})" /> 

をこれは私が10,000.00

しかし、まだそのすべてが私のすべての要件を満たしていないような値を入力することができます。私は、ユーザーが10000に入力する場合は それは10,000 onblurのような通貨形式に変換する必要があります。

私はJavascriptの入力型から値を読み込むと、解析せずに計算するのに使用できない文字列値の代わりに浮動小数点値を与えるはずです。

Answer 1

は、ここで追加のinput type="text"と回避策です：

http://jsfiddle.net/UEVv6/2/

HTML

<input type="text" id="userinput" pattern="[0-9]*"> 
<br> 
<input type="number" id="number"> 

JS

document.getElementById("userinput").onblur =function(){  

    //number-format the user input 
    this.value = parseFloat(this.value.replace(/,/g, "")) 
        .toFixed(2) 
        .toString() 
        .replace(/\B(?=(\d{3})+(?!\d))/g, ","); 

    //set the numeric value to a number input 
    document.getElementById("number").value = this.value.replace(/,/g, "") 

} 

正規表現は、ここからであるHow to print a number with commas as thousands separators in JavaScript

Answer 2

これを試してみてください - http://jsbin.com/azOSayA/1/edit

function commaSeparateNumber(val){ 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
     val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); 
    } 
    return val; 
    } 
$('#elementID').focusout(function(){ 

    alert(commaSeparateNumber($(this).val())); 
});