javascript - HTML 5 货币格式

Question

我在我的页面中使用了大量的 HTML 5 输入控件。我的要求之一是有一个具有货币功能的文本框。为此，我尝试了这个：

<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, "")

}

正则表达式来自这里如何在 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()));
});