Por ejemplo, tengo un cuadro de texto, estoy ingresando 12000 y quiero que se vea como 12,000 en el cuadro de texto ¿Cómo haré esto? Im usando html para hacer el cuadro de textoCómo agrego el separador de miles a mi formulario html
Respuesta
Esto es probablemente una mala 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>
Puede utilizar el Javascript Mask API
Para la entrada del usuario que recomendaría no formatear el valor de incluir una coma. Será mucho más fácil tratar con un valor entero (12000), que con un valor de cadena (12,000) una vez enviado.
Sin embargo, si está seguro de formatear el valor, como lo ha recomendado @achusonline, ocultaría el valor. Aquí es un plugin de jQuery que sería útil para obtener este resultado:
"mucho más fácil de tratar ..." ¿En serio? Me refiero a pelar el formateo es realmente muy simple. Lo difícil es lidiar con el formato para una audiencia multilingüe. Pero, si va a agregar el formato en el cliente, quitarlo en el envío es trivial. –
intentar algo así como 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;
}
luego usarlo en sus cuadros de texto al igual que
<input type="text" id="txtBox" onchange="return addCommas(this.value)" />
Esperanza eso ayuda
¡Gracias a Millones chicos! thumbs up @Mark Walters – dames
Para futuros lectores, tenga en cuenta que esto falla con la entrada 'type =" number "' ya que los campos de número html5 no pueden aceptar una coma –
ya que @DarrenSweeney dijo que 'number' no acepta la coma. pero 'tipo =" teléfono "' hará un truco –
Utilice el 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>
- 1. MYSQL - Separador de miles
- 2. Cómo utilizar separador de miles en NSString
- 3. Separador de miles en C++
- 4. ¿Cómo agrego un CAPTCHA a mi formulario de PHP?
- 5. ¿Cómo configurar el separador de miles en Java?
- 6. Separador de miles en .Net/F #
- 7. Agregue un separador de miles a un total con Javascript o jQuery?
- 8. Cómo insertar un separador de miles (coma) con convert duplicar
- 9. ¿Cómo agrego un separador a un JComboBox en Java?
- 10. ¿Cómo puedo declarar un separador de miles en read.csv?
- 11. Cómo agrego propiedades personalizadas a un formulario
- 12. Qt - punto decimal personalizado y separador de miles
- 13. Cómo agrego código HTML a JSF FacesMessage
- 14. ¿Cómo agrego curlpp a mi proyecto?
- 15. Cómo especificar el separador de miles y decimales utilizado por el NúmeroFormato de GWT
- 16. ¿cómo agrego la página html en mi proyecto iphone xcode?
- 17. conversión doble para cadena con N decimales, punto como separador decimal, y ningún separador de miles
- 18. ¿Cómo agrego intellisense a mi aplicación?
- 19. Formateo de números con separador de miles Smarty PHP
- 20. ¿Cómo agrego el soporte de Applescript a mi aplicación Cocoa?
- 21. Utilice una costumbre separador de miles en C#
- 22. ¿Cómo agrego mil separadores a un número en JavaScript?
- 23. ¿Cómo agrego una variable de configuración a mi script CMake?
- 24. ¿Cómo agrego un separador adicional a la parte superior de una UITableView?
- 25. ¿Cómo agregar botones dinámicamente a mi formulario?
- 26. Enviar formulario HTML a PDF
- 27. ¿Cómo agrego un UIWebView a mi aplicación iOS?
- 28. ¿Cómo agrego HTML arbitrario a un elemento en Dart?
- 29. ¿Cómo agrego una columna calculada a mi modelo EF4?
- 30. Cómo llamar a la clase servlet desde el formulario HTML
Gracias, pero ¿por qué dices que es probablemente una mala idea? – dames
Es una mala idea ya que cambia el texto que se envía al servidor. – David