Posicionar el Focus dentro de una caja de texto en determinado numero

Davhira · #1 (**permalink**) 21/02/2006, 16:25

Hola buenas tardes a todos, resulta que tengo un problemita a la hora de querer desarrollador una caja de texto que me posicione el cursor en determinada posicion. por ejemplo la caja tiene en la izquierda un signo de pesos, y un punto casi a la derecha para marcar los decimales, en si una mascara de captura para las monedas, y que el cursor se vaya posicionando al lado del punto... hay caray.. hasta yo me hice bolas... bueno la idea es esa

Davhira · #2 (**permalink**) 21/02/2006, 18:56

hola es algo mas o menos asi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="JavaScript" src="funciones_generales.js"></script>
<script language="JavaScript">
var punto=false;
var pesos=false;
function restriccion(txt_edit_mask)
{
variable=event.keyCode;
if ((variable>=48 && variable<=57) || variable==8 || variable==46 || variable==44)
{
if (variable==46)
reconfigurar(txt_edit_mask,variable)
if (variable==8)
comp(txt_edit_mask)
}
else
event.keyCode=0
}

function reconfigurar(txt)
{
cadena_new=""
cadena_old=String(txt.value)
if (punto==true)
{
event.keyCode=0;
return;
}
for (i=0;i<cadena_old.length;i++)
{
(cadena_old.charAt(i)!='.')?cadena_new+=cadena_old .charAt(i):i=cadena_old.length
}
punto=true
txt.value=cadena_new

}
function comp(txt)
{
cadena=String(txt.value)
for (i=0;i<cadena_old.length;i++)
{
(cadena_old.charAt(i)=='.')?punto=true:punto=false
}
}
</script>

</head>
<body>
<form name="formulario">
Inserta un Precio:<input type="text" name="txt_mask"
value=".00" onkeypress="restriccion(txt_mask)" style="text-Align:right">
</form>
</body>
</html>

Lo que me falta no mas es concatenar el signo de pesos, que ese no es problema, lo que quiero es que quiero es que cuando se inicialize la caja aparezca por decir en $0.00 y la posicion del cursor este despues del signo de pesos, y que cuando le presione un numero se sustituya e igual con los ceros que estan despues del punto... ojala alguien me pueda ayudar, o me diga nomas como posicionar el foco en determinado numero... gracias

Cap.Buscapina · #3 (**permalink**) 21/02/2006, 20:33

hola Davhira,

Te dejo el codigo que estuve haciendo.

Cita:

<html>
<head>
<script>
function punto(e,d){
tecla=(document.all) ? e.keyCode : e.which;
if(tecla==39 || tecla==46 || tecla==13 || tecla==9){
document.getElementById('decimales').focus();
return (tecla==46)?false:true;
}else{return true;
}
}
</script>
<style type="text/css">

</style>
</head>

<body>
<form name="form1" method="post" action="">
onkeydown <input name="moneda" type="text" class="in-izq" onclick="document.forms[0]['enteros'].focus();" value="$" size="1"><input name="enteros" type="text" class="in-medio" onkeypress="return punto(event)" size="8"><input name="p" type="text" class="in-medio" style="width:3px;" size="1" value="." onclick="document.forms[0]['enteros'].focus();"><input name="decimales" type="text" id="decimales" class="in-dcha" onclick="if(document.forms[0]['enteros'].value==''){document.forms[0]['enteros'].focus();}" size="3">

</form>

</body>
</html>

aunque le faltan pulir algunas cosas (no se por que no toma la tecla tab,no va en opera, le faltaría una validacion para numeros, etc).

espero que te sirva

saludos.

pd: haciendo este script me desayuné de que el numero asignado a cada tecla depende del evento que la invoque (no es lo mismo onkeypress, que onkeydown y onkeyup).

Davhira · #4 (**permalink**) 22/02/2006, 09:22

muchas gracias te quedo muy bien, me impresionaste, los demas detallitos yo se los pongo y despues los vuelvo a subir, ojala y le sirva a alguien mas, muchas gracias por todo

Davhira · #5 (**permalink**) 22/02/2006, 17:25

ojala y le sirva a alguien, despues de muchas horas de esfuerzo, le hice modificaciones al anterior, le agrege una funcion de validacion de numeros, separador de miles, y una funcion para seleccionar el texto para hacer mas facil el manejo.. espero les guste

<html>
<head>
<style type="text/css">

</style>

<script language="JavaScript">
function punto(e,txt_dec)
{
tecla=event.keyCode
if(tecla==46)
{
txt_dec.focus()
return false
}
else
{
return true;
}
}
function validaciones(variable,dec_numero,ent_numero)
{
if ((variable>=48 && variable<=57) || variable==8 || variable==46 || variable==44)
{
if (variable==8 && dec_numero.value=="")
{
ent_numero.focus()
dec_numero.value='00'
}
else if (variable==8 && ent_numero.value=="")
{ ent_numero.value=0
textboxSelect(ent_numero)
}
else if (variable==8)
separar_miles(ent_numero)

}
else
{
event.keyCode=0
}
}
function separar_miles(cantidad)
{
valor=String(cantidad.value)
longitud=valor.length
var arreglo= new Array()
contador=0;
for (i=0;i<longitud; i++)
{
if (valor.charAt(i)!=',')
{
arreglo[contador]=valor.charAt(i)
contador++;
}
}
var cad1="",cad2="",cont=0;
for (j=arreglo.length-1;j>=0;j--)
{
cad1=arreglo[j]
cad2=cad1+cad2
cont++;
if ((cont % 3)==0)
{
if (j!=0)
{
cad2=','+ cad2
}
}

}
cantidad.value=cad2
}
function textboxSelect(oTextbox)
{
var oRange = oTextbox.createTextRange();

oRange.moveStart("character", 0);
oRange.moveEnd("character", oTextbox.value.length-1);
oRange.select();
}

</script>
</head>

<body>
<form name="formulario">

<input name="moneda" type="text" class="in-izq" value="$" size="1" style="width:9px" readonly tabIndex=-1>

<input name="enteros" type="text" class="in-medio" onkeypress="validaciones(event.keyCode, decimales, enteros);return punto(event,decimales)" size="15" maxlength="15" value="0" onfocus="textboxSelect(this)" onkeyup="separar_miles(this)">

<input name="p" type="text" class="in-medio" style="width:3px;" size="1" value="." readonly tabIndex=-1>

<input name="decimales" type="text" id="decimales" class="in-dcha" onfocus="(enteros.value=='')?enteros.focus():textb oxSelect(this)" size="2" maxlength="2" onkeypress="validaciones(event.keyCode,this,entero s)" value="00">
</form>
</body>
</html>

SiR.CARAJ0DIDA · #6 (**permalink**) 22/02/2006, 19:01

bueno, la gente que es inteligente y no usa exploradores defectuosos como explorer no le va a funcionar eso, para seleccionar parte de una caja de texto en firefox es asi: setSelectionRange(offsetStart, offsetEnd);
y event.keyCode no existe, hay q pasarle una referencia al evento

clinisbut · #7 (**permalink**) 04/04/2006, 07:19

y para que seleccione parte de una caja de texto en navegadores que no sean firefox?

Edito: Yo mismo me respondo, asin:
function selecciona(iStart,iLength,textarea)
{ caja.document.getElementById(textarea);
if (caja.createTextRange) { //Para IE
var oRange = caja.createTextRange();
oRange.moveStart('character', iStart);
oRange.moveEnd('character', iLength - caja.value.length);
oRange.select();
} else if (caja.setSelectionRange) { //Para Firefox
caja.setSelectionRange(iStart, iLength);
}

}