HTML 5 Формат валюты

Я использую множество элементов управления HTML 5 на своих страницах. Одно из моих требований - иметь текстовое поле с функцией валюты. Для этого я пробовал это:

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

Это позволяет мне вводить значения, такие как 10 000,00

Но все-таки все это не соответствует всем моим требованиям. Я хочу, чтобы, если пользователь вводит в 10000 он должен преобразовать его в формат валюты, например, 10 000 единиц.

И когда я прочитал значение из типа ввода в своем Javascript, он должен дать мне float вместо строкового значения, которое я не могу использовать для вычисления без разбора.

Ответ 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, "")

}

regex is here Как напечатать число с запятыми как разделители тысяч в JavaScript

Ответ 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()));
});