How do I add Thousands separator to my html form
This is probably a bad idea...
<!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>
Html Text box only allow numeric while typing thousand separator and decimal
Here I have wrote a javascript function. You can use this to convert to commas.
HTML
<input type="text" name="x1" onkeydown="numberWithCommas(this)"/>
Javascript
function numberWithCommas(x) {
setTimeout(function(){
if(x.value.lastIndexOf(".")!=x.value.length-1){
var a = x.value.replace(",","");
var nf = new Intl.NumberFormat();
console.log(nf.format(a));
x.value = nf.format(a);
}
},1);
}
Add thousand comma separators to input type number
- You can't put commas on a "number" input, so change it to "text".
- Since you can't use "toLocaleString" and toFixed together, a different solution is needed:
(function($) { $.fn.currencyInput = function() { this.each(function() { var wrapper = $("<div class='currency-input' />"); $(this).wrap(wrapper); $(this).before("<span class='currency-symbol'>$</span>"); $(this).val(parseFloat($(this).val()).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})); $(this).change(function() { var min = parseFloat($(this).attr("min")); var max = parseFloat($(this).attr("max"));
var value = parseFloat($(this).val().replace(/,/g, '')); if(value < min) value = min; else if(value > max) value = max; $(this).val(value.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})); }); }); };})(jQuery);
$(document).ready(function() { $('input.currency').currencyInput();});
.currency { padding-left:12px;}
.currency-symbol { position:absolute; padding: 2px 5px;}
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><input type="text" class="currency" min="0.01" max="2500.00" value="1125.00" />
Related Topics
Input Date Format With Dd/Mm/Yyyy in the Input Field
How to Download File in React Js
How Get Total Sum from Input Box Values Using JavaScript
Instead of Downloading, Files Are Opening in Browser
React Button Onclick Redirect Page
How to Load All the Images from One of My Folder into My Web Page, Using Jquery/Javascript
How to Import File from Public Folder in React Application
How to Move Focus on Next Field When Enter Is Pressed
Stringified Json Has Unwanted Double Quotes
Javascript Function Not Defined Error (But It Is Defined)
How to Detect Browser Back Button Click Event Using Angular
How to Tell If a String Contains a Certain Character in JavaScript
Regular Expression to Check Only One Decimal Point
How to Manipulate a Select Options Based on Another Select Option in HTML
Regex to Allow Only Certain Special Characters and Restrict Underscore
How to Detect Browser Refresh Using Angular
How to Compare Two Json Have the Same Properties Without Order