HTML 5 货币格式化

Question

我在我的页面中使用了许多HTML 5输入控件。 我的一个要求是具有货币功能的文本框。 为此，我尝试了以下代码：

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

这让我能够输入像10,000.00这样的值。

但它仍然不能完全满足我的需求。我希望，如果用户输入10000，它应该在失去焦点时转换为货币格式，如10,000。

当我从JavaScript中读取输入类型的值时，它应该给我一个浮点数而不是一个字符串值，否则我将无法进行计算。

- user2561997

---

input type="number".value 无论如何都将是一个字符串。你需要在某个时候对它进行解析... - Teemu

输入类型为“数字”的值在任何情况下都将是字符串。但是简单地使用parseFloat(input type="number".value)就可以在所有情况下工作。 - user2561997

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中以逗号为千位分隔符打印数字

- gherkins

---

谢谢，这个解决了我的问题，再加上下面Amith的解决方案。 - user2561997

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

- Amith

---

谢谢Amith。你解决了我的问题。 - user2561997