Ví dụ tôi có một hộp văn bản, tôi đang nhập 12000 và tôi muốn nó trông giống như 12.000 trong hộp văn bản Làm cách nào để thực hiện việc này? Im sử dụng html để làm hộpLàm cách nào để thêm Hàng nghìn dấu tách vào biểu mẫu html
Đây có thể là một ý tưởng tồi ...
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
<style>
label, input, button{font-size:1.25em}
</style>
<script>
// insert commas as thousands separators
function addCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
n= n.replace(/[^\d\.]+/g, '');
var ax1= n.indexOf('.'), ax2= -1;
if(ax1!= -1){
++ax1;
ax2= n.indexOf('.', ax1);
if(ax2> ax1) n= n.substring(0, ax2);
if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
}
return n;
}
window.onload= function(){
var n1= document.getElementById('number1'),
n2= document.getElementById('number2');
n1.value=n2.value='';
n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
e=e|| window.event;
var who=e.target || e.srcElement,temp;
if(who.id==='number2') temp= validDigits(who.value,2);
else temp= validDigits(who.value);
who.value= addCommas(temp);
}
n1.onblur= n2.onblur= function(){
var temp=parseFloat(validDigits(n1.value)),
temp2=parseFloat(validDigits(n2.value));
if(temp)n1.value=addCommas(temp);
if(temp2)n2.value=addCommas(temp2.toFixed(2));
}
}
</script>
</head>
<body>
<h1>Input Thousands Commas</h1>
<div>
<p>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
</p></div>
</body>
</html>
Bạn có thể sử dụng Javascript Mask API
Đối với người dùng nhập vào tôi khuyên bạn không định dạng giá trị bao gồm một dấu phẩy. Nó sẽ dễ dàng hơn nhiều để đối phó với một giá trị số nguyên (12000), hơn một giá trị chuỗi (12.000) sau khi gửi.
Tuy nhiên, nếu bạn chắc chắn về định dạng giá trị, thì khi @achusonline đã đề xuất, tôi sẽ che dấu giá trị. Dưới đây là một plugin jQuery đó sẽ là hữu ích để có được kết quả này:
"dễ dàng hơn nhiều để đối phó với ..." Thật sao? Tôi có nghĩa là tước định dạng thực sự rất đơn giản. Điều khó khăn là xử lý định dạng cho đối tượng đa ngôn ngữ. Tuy nhiên, nếu bạn định thêm định dạng trong ứng dụng khách, thì việc loại bỏ nó là không đáng kể. –
Hãy thử một cái gì đó giống như this
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Sau đó, sử dụng nó trên textbox của bạn như vậy
<input type="text" id="txtBox" onchange="return addCommas(this.value)" />
Hope giúp
Cảm ơn hàng triệu Guys !! thumbs up @Mark Walters – dames
Đối với người đọc trong tương lai, hãy nhớ điều này không thành công với đầu vào 'type =" number "' là trường số html5 không thể chấp nhận dấu phẩy –
như @DarrenSweeney cho biết 'số' không chấp nhận dấu phẩy. nhưng 'type =" tel "' sẽ làm một thủ thuật –
Sử dụng jQuery autoNumeric plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input with separator</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="autoNumeric.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myinput").autoNumeric(
'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'}
);
});
</script>
</head>
<body>
<input id="myinput" name="myinput" type="text" />
</body>
</html>
Cảm ơn bạn nhưng tại sao bạn nói nó có lẽ là một ý tưởng tồi? – dames
Đó là một ý tưởng tồi vì nó thay đổi văn bản được gửi đến máy chủ. – David