2012-03-19 49 views

Respuesta

2

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> 
+0

Gracias, pero ¿por qué dices que es probablemente una mala idea? – dames

+0

Es una mala idea ya que cambia el texto que se envía al servidor. – David

2

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:

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

+0

"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. –

10

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

+0

¡Gracias a Millones chicos! thumbs up @Mark Walters – dames

+1

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 –

+0

ya que @DarrenSweeney dijo que 'number' no acepta la coma. pero 'tipo =" teléfono "' hará un truco –

6

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> 
Cuestiones relacionadas