Posicionar al final de un campo de texto

cppleal · #1 (**permalink**) 18/04/2008, 09:04

Buenas.

Seguro que ya está contestado, pero la verdad es que no encuentro nada al respecto. Os explico.

Tengo un campo de un formulario que relleno con datos. Lo que quiero es que a la siguiente vez que se cargue la pantalla, a parte de poner el foco en dicho campo, el cursor se posicione al final del texto rellenado anteriormente.

Código:

<form name="formulario" onkeyup ="Buscartecla(<?php echo "'",$xmarca,"',",$pagina,",'",$orden; ?>',campo_busca)">
		<input type="text" name="campo_busca" size="20" value="<?php echo $xbusca; ?>"> 
	</form> 
	<script>document.formulario.campo_busca.focus();</script>

Muchas gracias anticipadas

Carmen.

codigojavascript · #2 (**permalink**) 18/04/2008, 09:41

Si almacenas en una variable el valor del cuadro:

miTexto = document.formulario.campo_busca.value

y luego vuelves a asignar este valor al cuadro,

document.formulario.campo_busca.value = miTexto

el cursor quedará posicionado al final de la cadena.

Saludos

cppleal · #3 (**permalink**) 19/04/2008, 00:13

Muchas gracias por la contestación.

No soy muy entendida en el tema y entre el php, el javascript y el html me vuelvo loca. No he conseguido meter el código que me indicaste para hacerlo funcionar. Si lo meto en el script me dice que no existe el campo, si lo meto como php, no me hace caso,... ¡Un desastre!.

Si adjunto el código, me podrías echar una mano?

Código:

function Buscartecla (zmarca, zpagina, zorden, campo_busca)
{
	$zbusca=campo_busca.value;
	
	window.location.href =  "otrapaginacion_busca_v04.php?xmarca=" + zmarca +
						"&pagina=" + 1 +
						"&orden=" + zorden + 
						"&busca=" + $zbusca 
						;
}

Código:

<script>
//	document.formulario.campo_busca.value = $xbusca;
</script>
	<form name="formulario" onkeyup ="Buscartecla(<?php echo "'",$xmarca,"',",$pagina,",'",$orden; ?>',campo_busca)">
		<input type="text" name="campo_busca" size="20" value="<?php echo $xbusca; ?>"> <input type="button" name="Boton1" value="Buscar Apellidos/Nombre"
							onclick="Buscarboton(<?php echo "'",$xmarca,"',",$pagina,",'",$orden; ?>',campo_busca)"> 
	</form> 

<script>
	document.formulario.campo_busca.focus();
</script>

codigojavascript · #4 (**permalink**) 19/04/2008, 06:47

Carmen: lo que necesitas hacer no es muy dificil y no requiere hacerlo con PHP así que vamos a tratar de solucionarlo solo con JavaScript.

Para esto necesito que me pases el código completo, tanto del javascript como el HTML donde creas el formulario. Del código PHP olvidate ya que ha mi no me sirve.

Es decir, si tienes un elemento input --> text al cual le estás asignando el valor de value mediante php prefiero que me pases el veradero valor que toma, es decir el valor enviado por PHP hacia el navegador. Por ejemplo:

Tu tienes:
<input type="text" name="campo_busca" size="20" value="<?php echo $xbusca; ?>">

Cuando me deberías pasar:
<input type="text" name="campo_busca" size="20" value="El_Valor_Que_Sea">

Espero haberme explicado. No dudes en consultar lo que sea.

Saludos!!!

derkenuke · #5 (**permalink**) 19/04/2008, 07:25

Hola cppleal:

Creo que te gustará saber de la existencia de este hilo:
http://www.forosdelweb.com/f13/posic...-input-507927/

Podemos colocar el cursor dentro de una caja de texto donde queramos.

Sólo tendrías que contar con la función ponCursorEnPos(pos) siendo laCaja una variable local que apunte a tu caja de texto:

Código PHP:

  var laCaja = document.formulario.campo_busca; 
ponCursorEnPos(laCaja.value.length);

De todas maneras lo más conveniente es convertir laCaja a una variable local pasada por argumento, pero si no la vas a reutilizar te puede valer así.

Saludos.

cppleal · #6 (**permalink**) 23/04/2008, 11:10

Cita:

Iniciado por codigojavascript

Carmen: lo que necesitas hacer no es muy dificil y no requiere hacerlo con PHP así que vamos a tratar de solucionarlo solo con JavaScript.

Para esto necesito que me pases el código completo, tanto del javascript como el HTML donde creas el formulario. Del código PHP olvidate ya que ha mi no me sirve.

Es decir, si tienes un elemento input --> text al cual le estás asignando el valor de value mediante php prefiero que me pases el veradero valor que toma, es decir el valor enviado por PHP hacia el navegador. Por ejemplo:

Tu tienes:
<input type="text" name="campo_busca" size="20" value="<?php echo $xbusca; ?>">

Cuando me deberías pasar:
<input type="text" name="campo_busca" size="20" value="El_Valor_Que_Sea">

Espero haberme explicado. No dudes en consultar lo que sea.

Saludos!!!

Gracias por tu interés.
He estado fuera unos días y no he podido hacer nada con este tema. La solución que me da "derkenuke", no la entiendo, así que ahora te preparo lo que me pedías. Ahora la subo.

Perdona "derkenuke", no se programar. Me limito a cortar/pegar y aprender de vosotros. Hay muchos conceptos que no entiendo y me cuesta desarrollar por mi sola cualquier cosa. De todas formas agradezco "infinito" vuestra ayuda.

Muchas gracias.

cppleal · #7 (**permalink**) 23/04/2008, 11:15

Ahí va el código que me pedías. Lo paso en dos trozos, ya que es muy grande.

Código:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ejemplo de paginaci&oacute;n de resultados</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache" />
<style type="text/css">
<!--
a.p:link {
	color: #0066FF;
	text-decoration: none;
}
a.p:visited {
	color: #0066FF;
	text-decoration: none;
}
a.p:active {
	color: #0066FF;
	text-decoration: none;
}
a.p:hover {
	color: #0066FF;
	text-decoration: underline;
}
a.ord:link {
	color: #000000;
	text-decoration: none;
}
a.ord:visited {
	color: #000000;
	text-decoration: none;
}
a.ord:active {
	color: #000000;
	text-decoration: none;
}
a.ord:hover {
	color: #000000;
	text-decoration: underline;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<script type="text/javascript">
function chequear(obj, codigo, zmarca, zpagina, zorden, zbusca)
{
// para poner en body --->>onload="document.formulario.campo_busca.focus()"<<------

//	alert(codigo);
//	alert(zmarca);
//	alert(zpagina);
//	alert(zorden);
//	alert(zbusca);

	if (obj.checked==true)
{ 
//		alert("Check Activado" + codigo);
		valor_check="Si";
}
	else
{
//		alert("Check Desactivado" + codigo);
		valor_check="No";
}
	smarca = valor_check;
	scodparticip = codigo;
	

	window.location.href =  "modifica_participante_busca_v03.php4?Marca=" + smarca +
							"&Cod_Participante=" + scodparticip +
							"&Pagina_Marca=" + zmarca + 
							"&Pagina_Pagina=" + zpagina +
							"&Pagina_Orden=" + zorden +
							"&Buscar=" + zbusca 
							;
//	parent.location.href = 'index.php';
	window.alert("Actualización de Parpicicpante OK");
}
function modifica_particip(obj, codigo, zmarca, zpagina, zorden, zbusca)
{
// para poner en body --->>onload="document.formulario.campo_busca.focus()"<<------

//	alert(codigo);
//	alert(zmarca);
//	alert(zpagina);
//	alert(zorden);
//	alert(zbusca);

	if (obj.checked==true)
{ 
//		alert("Check Activado" + codigo);
		valor_check="Si";
}
	else
{
//		alert("Check Desactivado" + codigo);
		valor_check="No";
}
	smarca = valor_check;
	scodparticip = codigo;
	
	window.open("Actualiza_Particip.html" , "ventana1" , "width=700,height=400,scrollbars=NO") 


//	window.location.href =  "modifica_participante_busca_v05.php4?Marca=" + smarca +
//							"&Cod_Participante=" + scodparticip +
//							"&Pagina_Marca=" + zmarca + 
//							"&Pagina_Pagina=" + zpagina +
//							"&Pagina_Orden=" + zorden +
//							"&Buscar=" + zbusca 
//							;
//	parent.location.href = 'index.php';
//	window.alert("Actualización de Parpicicpante OK");
}
function Buscartecla (zmarca, zpagina, zorden, campo_busca)
{
//  	alert(zbusca.value);
//  	alert(campo_busca.value);

	$zbusca=campo_busca.value;
	
	window.location.href =  "otrapaginacion_busca_v05.php?xmarca=" + zmarca +
						"&pagina=" + 1 +
						"&orden=" + zorden + 
						"&busca=" + $zbusca 
						;
}
function Buscarboton (zmarca, zpagina, zorden, campo_busca)
{
//  	alert(zmarca);
//  	alert(zpagina);
//  	alert(zorden);

	$zbusca=zbusca.value;
	
	window.location.href =  "otrapaginacion_busca_v05.php?xmarca=" + zmarca +
						"&pagina=" + 1 +
						"&orden=" + zorden + 
						"&busca=" + $zbusca 
						;
}
function pulsar(e) {
  return (e.keyCode!=13);
}
</script>

cppleal · #8 (**permalink**) 23/04/2008, 11:16

La segunda parte:

Código:

<div align="center"><strong><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Participantes Edici&oacute;n 18 de CAURCA (<b>Colegio_Najera</b>)
			</font></strong> </div>
<hr noshade style="color:CC6666;height:1px">
<br>
Marca seleccion -> noCriterio Busqueda -> gonzControles de Página: pagina -> 1 inicio -> 1 final -> 1 numPags -> 1 tamPag -> 10 seccionActual -> 0<div align='center'><font face='verdana' size='1'>Encontrados 7 participantes<br>Ordenados por <b>APELLIDOS_NOMBRE_PARTICIPANTE<br></b>Criterio de busqueda: <b>gonz</b></font></div><table align='center' width='100%' border='0' cellspacing='1' cellpadding='0' class='TablaDatos' id='TablaDatos'><tr><td colspan='1'><hr noshade></td></tr><th bgcolor='#CCCCCC'><a class='ord'>¿Corre este Año?</a></th><th bgcolor='#CCCCCC'><a class='ord' href='/nuestraagrupacion/0000009a7d0ee0701/0000009a7d0ef1d03/otrapaginacion_busca_v05.php?xmarca=no&pagina=1&orden=APELLIDOS_NOMBRE_PARTICIPANTE&busca=gonz'>Apellidos-Nombre</a></th><th bgcolor='#CCCCCC'><a class='ord' href='/nuestraagrupacion/0000009a7d0ee0701/0000009a7d0ef1d03/otrapaginacion_busca_v05.php?xmarca=no&pagina=1&orden=FECHA_NACIMIENTO&busca=gonz'>Fecha Nacimiento</a></th><th bgcolor='#CCCCCC'><a class='ord'>Codigo_Int</a></th><!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10059, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10059, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">CAVERO GONZALEZ LUCIA</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">24-06-2000</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10059</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10103, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10103, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ GONZALEZ ALVARO</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">26-02-1998</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10103</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10102, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10102, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ GONZALEZ TERESA</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">01-11-2002</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10102</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10070, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10070, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ PEREA ETOR</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">03-12-2000</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10070</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10122, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10122, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ PEREA LUIS</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">17-01-2002</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10122</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,8724, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,8724, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ RODRIGUEZ CASTOR</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">11-01-1960</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">8724</font></td>
  </tr>
<!-- fin tabla resultados -->
<!-- tabla de resultados -->
 <tr bgcolor="#CC6666"	onMouseOver="this.style.backgroundColor='#FF9900';this.style.cursor='hand';" 
						onclick="modifica_particip(this,10119, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')" onMouseOut="this.style.backgroundColor='#CC6666'"o"];">
    <td><font size="1" face="Verdana" color="#FFFFCC">
<input type="checkbox" id="marcap" name="marcax" value="Si" 
						onclick="chequear(this,10119, 'no',1,'APELLIDOS_NOMBRE_PARTICIPANTE','gonz')">
						No</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">GONZALEZ VIVAS DAVID</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC">02-03-2000</font></td>
    <td><font size="1" face="Verdana" color="#FFFFCC" id="cod_participante">10119</font></td>
  </tr>
<!-- fin tabla resultados -->
</table><script>
//	document.formulario.campo_busca.value = $xbusca;
</script>
	<form name="formulario" onkeyup ="Buscartecla('no',1,'APELLIDOS_NOMBRE_PARTICIPANTE',campo_busca)">
		<input type="text" name="campo_busca" size="20" value="gonz"> <input type="button" name="Boton1" value="Buscar Apellidos/Nombre"
							onclick="Buscarboton('no',1,'APELLIDOS_NOMBRE_PARTICIPANTE',campo_busca)"> 
	</form> 

<script>
	document.formulario.campo_busca.focus();

//    var laCaja = document.formulario.campo_busca; 
//    ponCursorEnPos(laCaja.value.length);  
	
</script>

	<br>
	<table border="0" cellspacing="0" cellpadding="0" align="center">
	<tr><td align="center" valign="top">
Controles de Página: pagina -> 1 inicio -> 1 final -> 1 numPags -> 1 i -> <font face='verdana' size='-2'><b>1</b>&nbsp;</font>	</td></tr>
	</table>
<hr noshade style="color:CC6666;height:1px">
<div align="center"><font face="verdana" size="-2"><a class="p" href='otrapaginacion_busca_v05.php?xmarca=no&pagina=1&orden=APELLIDOS_NOMBRE_PARTICIPANTE'>::RECARGA::</a></font></div>
</body>
</html>

cppleal · #9 (**permalink**) 23/04/2008, 23:50

Gracias chicos.

Al final, derkenuke, he conseguido implementar la función que me indicabas.
Ya tengo el formulario OK.

saludos
Carmem.

derkenuke · #10 (**permalink**) 24/04/2008, 04:03

Me alegro!

Pero no estaría mal que postearas la solución final, por si alguien que viene buscándola la encuentre.

Saludos.

cppleal · #11 (**permalink**) 24/04/2008, 04:15

Me parece perfecto. Voy a ello.

La función está tal cual la dejaste en el hilo que indicabas.

Código:

function ponCursorEnPos(pos){  
    if(typeof document.selection != 'undefined' && document.selection){        //método IE 
        var tex=laCaja.value; 
        laCaja.value='';  
        laCaja.focus(); 
        var str = document.selection.createRange();  
        laCaja.value=tex; 
        str.move("character", pos);  
        str.moveEnd("character", 0);  
        str.select(); 
    } 
    else if(typeof laCaja.selectionStart != 'undefined'){                    //método estándar 
        laCaja.setSelectionRange(pos,pos);  
        forzar_focus();            //debería ser focus(), pero nos salta el evento y no queremos 
    } 
}

El formulario va haciendo una búsqueda por nombre en una base de datos. A medida que se teclea se va haciendo la selección (es costosa, pero al ser pocos registros, no me importa).

Código:

?>
	<form name="formulario" onkeyup ="Buscartecla(<?php echo "'",$xmarca,"',",$pagina,",'",$orden; ?>',campo_busca)">
		<font face="Verdana" size="2">Búsqueda por Apellidos/Nombre: </font>  
		<input type="text" name="campo_busca" size="30" value="<?php echo $xbusca; ?>"> 
	</form> 

<script>
	document.formulario.campo_busca.focus();

	var laCaja = document.formulario.campo_busca; 
	ponCursorEnPos(laCaja.value.length);  

</script>

Saludos
Carmen

cppleal · #12 (**permalink**) 24/04/2008, 12:45

Pensaba que lo tenía cerrado. Pues no.

Como os dije, mi objetivo del campo en cuestión es ir haciendo un filtro contra la BD a medida que voy escribiendo un texto (Apellidos/Nombre).

Resulta que el problema que tengo ahora es que cuando escribo un blanco para poner otro apellido, me lo ignora y me vuelve a posicionar en la última palabra escrita. FUNCIONA DEMASIADO BIEN.

¿Cómo podría hacer para que tuviera en cuenta los blancos que voy metiendo?

Saludos y gracias anticipadas
Carmen