HTML 5 통화 형식

Question

내 페이지에서 많은 HTML 5 입력 컨트롤을 사용하고 있습니다. 내 요구 사항 중 하나는 통화 기능이있는 텍스트 상자를 사용하는 것입니다.

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

이 날 10,000.00

하지만 여전히 모든 충족하지 못하는 내 모든 요구 사항과 같은 값을 입력 할 수 있습니다 :이를 위해 나는이 시도. 사용자가 10000 을 입력하면 10,000 onblur와 같은 통화 형식으로 변환해야합니다.

그리고 자바 스크립트에서 입력 형식의 값을 읽을 때 구문 분석하지 않고 계산할 수없는 문자열 값 대신 float 값을 주어야합니다.

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())); 
});