我在我的页面中使用了许多HTML 5输入控件。 我的一个要求是具有货币功能的文本框。 为此,我尝试了以下代码:
<input type="number" pattern="(d{3})([.])(d{2})" />
这让我能够输入像10,000.00这样的值。
但它仍然不能完全满足我的需求。我希望,如果用户输入10000,它应该在失去焦点时转换为货币格式,如10,000。
当我从JavaScript中读取输入类型的值时,它应该给我一个浮点数而不是一个字符串值,否则我将无法进行计算。
我在我的页面中使用了许多HTML 5输入控件。 我的一个要求是具有货币功能的文本框。 为此,我尝试了以下代码:
<input type="number" pattern="(d{3})([.])(d{2})" />
这让我能够输入像10,000.00这样的值。
但它仍然不能完全满足我的需求。我希望,如果用户输入10000,它应该在失去焦点时转换为货币格式,如10,000。
当我从JavaScript中读取输入类型的值时,它应该给我一个浮点数而不是一个字符串值,否则我将无法进行计算。
这里有一个解决办法,使用额外的 input type="text"
:
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中以逗号为千位分隔符打印数字
试试这个 - 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()));
});
input type="number".value
无论如何都将是一个字符串。你需要在某个时候对它进行解析... - Teemu