Vuelvo acá porque estuve mirando el HTML 5 y sus variantes de
input.
Resulta que
type=number es para hacer un
spin, pero no agrega mucho para los formatos de números en formularios, y éste asunto del encolumnado del punto decimal —como verán— ya es muy viejo para que no lo hayan solucionado de alguna forma.
Me puse a actualizar el código para los editables, pero no me tomé tanto trabajo como en el anterior, no cubre tantas posibilidades. Habría que esperar a que los desarrolladores de navegadores lo implementen por las suyas.
Igual, les dejo lo que tengo hecho hasta que me cansé y pisé la tierra : viendo los calendarios, paletas de colores,
slidebars y hasta el espín que mencioné más arriba, que resolvieron tan fácil mientras nosotros nos matábamos para conseguirlos con JS, CSS y HTML, ni en broma me voy a poner a mejorarlo. (¡Y encima que éste no anda en
Chrome!)
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJUSTA DECIMALES.</title>
<script type="text/javascript">
var anchoNum, columna, totInputs, totDecNum1, cadaInput;
var maxDec = 0;
var vuelta = 0;
function inicia() {
anchoNum = document.getElementById("muestra").offsetWidth / 2;
ajusta();
}
function ajusta(){
columna = document.getElementById("lista0");
totInputs = columna.getElementsByTagName("input").length;
for (i=0; i<totInputs; i++) {
var vInput = columna.getElementsByTagName("input")[i].value;
if(vInput.indexOf(".") == -1) {vInput = vInput + ".";}
columna.getElementsByTagName("input")[i].value = vInput;
var cortaNum = vInput.split(".");
var totDecNum0 = (cortaNum != "") ? cortaNum[1].length : 0;
maxDec = (maxDec < totDecNum0) ? totDecNum0 : maxDec;
cadaInput = columna.getElementsByTagName("input")[i];
if(cadaInput.value != ".") {
totDecNum1 = cadaInput.value.split(".")[1].length;
//alert("maxDec "+maxDec+"; "+totDecNum1+" decim en input "+i)
var espaciado = (maxDec - totDecNum1) * anchoNum;
//alert("maxDec "+maxDec+" - cant decimales "+totDecNum1+" * "+ anchoNum +"="+ espaciado +"px de padding en input" +i)
cadaInput.style.paddingRight = espaciado +"px";
cadaInput.style.width = 140 - espaciado +"px";
cadaInput.value = cadaInput.value;
}
else {
cadaInput.value = "";
//alert(i+" vacio");
}
}
/* LAS SIGUIENTES LINEAS SON PARA QUE EL ESCRIPT DE "2 VUELTAS" */
if(vuelta == 0){
vuelta = 1;
setTimeout(ajusta, 10);
}
else{
vuelta = 0;
maxDec = 0;
}
}
onload = inicia;
</script>
<style type="text/css">
#lista0 { border: red 2px solid; width: 144px; }
.punto { height: 18px; width: 140px; text-align: right;
font: 14px/14px arial, helvetica, sans-serif;
overflow: hidden; }
#muestra { font: 14px/14px arial, helvetica, sans-serif;
position: absolute; left: 0; top: -50px; }
.punto:focus { background-color: lime; }
</style>
</head>
<body>
<div id=lista0>
<span id=muestra>00</span>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
<input type=text maxlength=9 class=punto onchange=ajusta()><br>
</div>
</body>
</html> Cómo se llama este componente? slidebar / trackbar en html Cambio de tamaño del colorwheel Fechas (externo)
Fechas y horas (manejo de tiempo) (externo)