Bien. Como de los -hasta la fecha- 40 visitantes al tema nadie me respondió, voy a asumir que no funciona en ninguno de los navegadores más comunes.
Y después de hacer varias pruebas con diferentes métodos, voy a asumir que nunca lo hará.
Dije más arriba que hubo una propuesta de agregarlo al HTML, y más tarde pude recordar que no se aplicaba a una tabla sino a un
pre , lo que resulta perfectamente lógico : es un contenedor que por omisión usa fuente de ancho fijo y no ajusta las líneas de texto ni salta sin un
break.
Y es que con encolumnar los puntos decimales no alcanza, porque los números no se van a mantener encolumnados -por supuesto, tienen todos distinto ancho- así que lo mejor es escribirlos usando una fuente monospace. Por otro lado, los números van alineados a la derecha, y recién después alineamos los puntos.
Ninguna de estas 2 condiciones está implícita en
text-align: ".", especialmente la segunda, ya que nos impide usar
text-align: right en la misma celda.
Pero volvamos al principio y veamos qué pasa con los
input's.
Aquí tenemos un problema adicional, y es que son editables y nos obligan a hacer ajustes con cada cambio en los valores. También tenemos que saber si lo que ingresan es un número; y si no, poner un aviso, convertirlo a "0" (cero) o darle un tratamiento como
string.
Es practicamente imposible poner
padding o márgenes dentro de una caja de texto, así que lo único que se me ocurrió es usar una monospace y rellenar con espacios a la derecha hasta que los puntos queden encolumnados.
El ejemploes un beta; es decir, que ya funciona, pero hay que terminar de pulirlo y corregir algún
bug (el más grave es el que tiene la conversión a número, ya que
paseFloat() pone un límite a la cantidad de dígitos y si nos pasamos los corta)
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>CENTRA PUNTO DECIMAL EN INPUTS. </title>
<script type="text/javascript">
var contenidos , relleno , decimales , anchoDecimales, valores, anchoDecimalesMax;
var anchoNumerosMax = 0;
relleno = new Array();
function centra(){
anchoDecimalesMax = 0;
contenidos = new Array();
decimales = "";
decimales = new Array();
/*IDENTIFICA LOS INPUT NOMBRE "centrado"*/
valores = document.formulario.centrado;
//alert(valores.length)
for(c=0; c<valores.length; c++){
/*IDENTIFICA TEXTO O NÚMEROS EN CADA INPUT Y LOS AJUSTA ELIMINANDO CEROS DE MÁS*/
valores[c].value = (parseFloat(valores[c].value) == valores[c].value*1) ? parseFloat(valores[c].value) : valores[c].value;
//alert(valores[c].value)
//alert(parseFloat(valores[c].value))
//alert(valores[c].value*1)
/*ARMA UN ARRAY "contenidos" CON TODOS LOS VALORES*/
contenidos[c] = valores[c].value;
//alert("contenidos = "+contenidos)
}
for(c=0; c<valores.length; c++){
/*SI EL VALOR DEL "contenidos" ES UN NÚMERO Y TIENE PUNTO DECIMAL ...*/
if((contenidos[c]*1 == contenidos[c]) && (contenidos[c].indexOf(".") != -1)){
/*...MIDE LA CANTIDAD DE DECIMALES QUE QUEDARÁN A LA DERECHA DEL PUNTO Y LA GUARDA EN ARRAY "decimales". COMPARA LA CANTIDAD CON "anchoDecimales" PARA SABER SI ES MAYOR...*/
decimales[c] = contenidos[c].substring( contenidos[c].lastIndexOf(".") ).length;
anchoDecimalesMax = (decimales[c] > anchoDecimalesMax) ? decimales[c] : anchoDecimalesMax;
//alert("Nro. con punto. (decimales "+c+")=" +decimales+ " \r\n anchoDecimalesMax" +[c]+ " = "+anchoDecimalesMax)
valores[c].style.textAlign = "right";
}
else if( (contenidos[c]*1 == contenidos[c]) && contenidos[c].indexOf(".") == -1 && contenidos[c] != ""){
/*...SI EL VALOR DEL "contenidos" ES UN NÚMERO ENTERO SIN PUNTO DECIMAL ASIGNA AL ARRAY Y A LA REFERENCIA UN VALOR DE "0" DECIMALES*/
decimales[c] = 0;
anchoDecimalesMax = (decimales[c] > anchoDecimalesMax) ? decimales[c] : anchoDecimalesMax;
//alert("Nro. sin punto. (decimales "+c+")=" +decimales+ "\r\n anchoDecimalesMax" +[c]+ " = "+anchoDecimalesMax)
valores[c].style.textAlign = "right";
}
else {
/*...SI EL VALOR DE "contenidos" ES UN TEXTO ASIGNA AL ARRAY Y A LA REFERENCIA UN VALOR "-1"...*/
decimales[c] = -1;
anchoDecimalesMax = (decimales[c] > anchoDecimalesMax) ? decimales[c] : anchoDecimalesMax;
//alert("texto (anchoDecimales "+c+")=" +anchoDecimales+ " \r\n anchoDecimalesMax" +[c]+ " = "+anchoDecimalesMax)
valores[c].style.textAlign = "left";
}
}
//alert("anchoDecimalesMax = "+anchoDecimalesMax);
//alert("decimales = "+decimales);
for(c=0; c<valores.length; c++){
//alert("decimales"+[c]+" = " +decimales[c])
/*VACÍA EL ARRAY "relleno" PARA CADA VALOR*/
relleno[c] = "";
if(decimales[c] != -1){
/*SI NO ES TEXTO...*/
while(decimales[c] < anchoDecimalesMax){
/*...MIENTRAS LOS DECIMALES DEL VALOR SEN MENOS QUE LOS DEL VALOR MÁS GRANDE, SE RELLENAN CON ESPACIOS A LA DERECHA...*/
decimales[c]++;
relleno[c] = relleno[c] + " ";
}
//alert(c+" "+decimales[c]+" numero")
}
else{
/*... Y SI ES TEXTO NO SE RELLENA*/
relleno[c] = "";
//alert(c+" "+decimales[c]+" texto o nada")
}
valores[c].value += relleno[c];
//alert("relleno"+[c]+" = |" +relleno[c]+ "|")
}
for(c=0; c<valores.length; c++){
/*DESPUÉS DE AGREGADO EL RELLENO, SE RECALCULA EL NUEVO ANCHO MÁXIMO DE LOS VALORES...*/
anchoNumerosMax = (valores[c].value.length > anchoNumerosMax) ? valores[c].value.length : anchoNumerosMax;
valores[c].size = "1";
}
//alert("anchoNumerosMax = "+anchoNumerosMax)
for(c=0; c<valores.length; c++){
/*...Y SE ASIGNA COMO ATRIBUTO size A LOS INPUT*/
valores[c].size = anchoNumerosMax;
}
}
//onload = centra;
</script>
<style type='text/css'>
.centraPunto{text-align:right; font:bold 16px monospace; }
.negativo {color:#ff0000; }
</style>
</head>
<body>
<form name="formulario">
0 <input type=text value="123456789012345.6" name=centrado class=centraPunto size="" onblur="centra()">
<br>
1 <input type=text value="12.345" name=centrado class=centraPunto size="" onblur="centra()" >
<br>
2 <input type=text value="-123.45" name=centrado class="centraPunto negativo" size="" onblur="centra()" >
<br>
3 <input type=text value="12345" name=centrado class=centraPunto size="" onblur="centra()" >
<br>
4 <input type=text value="Texto" name=centrado class=centraPunto size="" onblur="centra()" >
<br>
5 <input type=text value=".12345" name=centrado class=centraPunto size="" onblur="centra()" >
<br>
6 <input type=text value="1.2345" name=centrado class=centraPunto size="" onblur="centra()" >
<br>
<input type=reset value="RESET">
</form>
<p>
<input type=button onclick="centra(); this.disabled=true" value="CENTRA PUNTO DECIMAL">
</p>
</body>
</html>
Tengo hechas 3 versiones para tabla; la primera -la que mejor funcionaba- era incompatible con
Firefox y seguramente con algún otro; las demás andan en
IE / FF, pero creo que puedo hacer una cuarta, más limpia y parecida a la de los
input's.