Comment puis-je ajouter un séparateur de milliers à mon formulaire html

Par exemple, j'ai une zone de texte, j'entre en 12000 et je veux que cela ressemble à 12 000 dans la zone de texte. Comment ferais-je cela? J'utilise html pour faire la boîte de texte

C'est probablement une mauvaise idée …

<!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>

Essayez quelque chose comme ça

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

Ensuite, utilisez-le sur vos zones de texte comme

 <input type="text" id="txtBox" onchange="return addCommas(this.value)" />

J'espère que cela pourra aider

Utilisez le plugin jQuery autoNumeric :

 <!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>

Vous pouvez utiliser l' API Javascript Mask

Pour l'entrée de l'utilisateur, je recommande de ne pas formater la valeur pour inclure une virgule. Il sera beaucoup plus facile de traiter une valeur entière (12000) qu'une valeur de chaîne (12 000) une fois soumise.

Cependant, si vous êtes certain sur le formatage de la valeur, alors que @achusonline l'a recommandé, je masquerais la valeur. Voici un plugin jQuery qui serait utile pour obtenir ce résultat:

http://digitalbush.com/projects/masked-input-plugin/