2013-08-19 11 views
13

Używam wielu formantów wprowadzania HTML 5 na moich stronach. Jednym z moich wymagań jest posiadanie pola tekstowego z funkcją waluty. Do tego próbowałem to:HTML 5 Format waluty

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

To pozwala mi wpisać wartości jak 10.000,00

ale mimo wszystkich jej nie spełniających wszystkie moje wymagania. Chcę, jeśli użytkownik wpisze w 10000 , powinien przekonwertować go na format walutowy, np. 10.000 onblur.

A kiedy odczytam wartość z typu wejściowego w moim JavaScript, powinna ona dać mi wartość float zamiast wartości łańcucha, której nie mogę użyć do obliczenia bez analizowania.

+0

input type '= "number" .value' będzie ciąg w każdym przypadku. W każdym razie musisz go sparsować ... – Teemu

+0

typ danych wejściowych = "liczba". Wartość będzie w każdym przypadku ciągiem. ale proste posiadanie parseFloat (input type = "number" .value) działałoby we wszystkich przypadkach. – user2561997

Odpowiedz

17

Oto obejście z dodatkowym 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, "") 

} 

regex jest stąd How to print a number with commas as thousands separators in JavaScript

+0

Dzięki temu rozwiązałem mój problem w połączeniu z rozwiązaniem Amith poniżej. – user2561997

2

spróbować - 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())); 
}); 
+0

Dzięki Amith. Rozwiązałeś mój problem. – user2561997