Colocar el cursor en una caja de texto en determinada posición

derkenuke · #1 (**permalink**) 03/05/2007, 14:07

Hola.

He intentado mediante un botón hacer un focus() a una caja de texto y que el cursor en vez de al final del contenido se me coloque en la posición que yo le indique. Esto me sale bien en IE y en FF, en los dos. Me serví de algún código de las FAQ.

Ahora viene el problema, cuando quiero sustituir el focus() de toda la vida por esa función. Es decir, quiero que al saltar el evento onfocus el cursor se posicione donde yo diga. En teoría es tan sencillo como incluir la función en el evento, pero no:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta name="Author" content="derkeNuke"> 
</head> 
 
<body> 
 
 
<input type="text" id="caja" value="0123456789" /> 
<input type="button" value="pos(3)" onclick="ponCursorEnPos(3)" /> 
<br/> 
 
<script> 
 
//función para escribir DEBUG 
function e(q,noBr) { 
    document.body.appendChild( document.createTextNode(q) ); 
    if(!noBr) document.body.appendChild( document.createElement("BR") ); 
} 
 
 
var laCaja=document.getElementById("caja"); 
 
//da el foco a la caja colocando el cursor de inserción en la posición pos 
function ponCursorEnPos(pos){  
    if(typeof document.selection != 'undefined' && document.selection){  
        e("ponCursorEnPos: Con IE coloco el cursor en la posición "+pos); 
        forzar_focus(); 
        var str = document.selection.createRange();  
        str.move("character", pos);  
        str.moveEnd("character", 0);  
        str.select(); 
    } 
    else if(typeof laCaja.selectionStart != 'undefined'){  
        e("ponCursorEnPos: Con Firefox u otro coloco el cursor en la posición "+pos); 
        laCaja.setSelectionRange(pos,pos);  
        forzar_focus(); 
    } 
}  
 
function focus_handler() { 
    e("focus_handler: he saltado por el evento focus()"); 
    ponCursorEnPos(2); 
    //setTimeout("ponCursorEnPos(2)",1000); 
} 
 
//hace el focus sin saltar el evento onfocus, es decir, sin saltar focus_handler 
function forzar_focus() { 
    e("Fuerzo el focus sin que salte el evento onfocus"); 
    laCaja.onfocus=null;                            //quito 
    laCaja.focus();                                    //hago 
    setTimeout("laCaja.onfocus=focus_handler",1000);    //pongo (retrasado para IE...) 
} 
 
laCaja.onfocus=focus_handler; 
 
</script> 
 
</body> 
</html>

Como se puede ver el botón funciona bien, pero al hacer un focus con el ratón no (en FF sí, en IE no). He tenido que añadir la función forzar_focus() para que se haga un focus() sin que salte el evento onfocus, quitándole la función antes y añadiéndosela después (en IE hay que añadirla con retardo, si no salta automáticamente).

Bueno, ¿alguna solución para esto?

Gracias por vuestros mensajes.

derkenuke · #2 (**permalink**) 03/05/2007, 16:10

Sorry, ya lo he solucionado, quité codigo de las FAQ, pensaba que no tenía sentido quitarle y ponerle el mismo value al input. Hay que hacer el createRange() con el campo vacío, yo que sé por qué.

Bueno, ya se puede hacer:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>

<body>


<input type="text" id="caja" value="0123456789" />
<input type="button" value="pos(3)" onclick="ponCursorEnPos(3)" />
<br/>

<script>

//función para escribir DEBUG
function e(q,noBr) {
    document.body.appendChild( document.createTextNode(q) );
    if(!noBr) document.body.appendChild( document.createElement("BR") );
}


var laCaja=document.getElementById("caja");

//da el foco a la caja colocando el cursor de inserción en la posición pos
function ponCursorEnPos(pos){ 
    if(typeof document.selection != 'undefined' && document.selection){ 
        e("ponCursorEnPos: Con IE coloco el cursor en la posición "+pos);
        var tex=laCaja.value;
        laCaja.value=''; 
        forzar_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'){ 
        e("ponCursorEnPos: Con Firefox u otro coloco el cursor en la posición "+pos);
        laCaja.setSelectionRange(pos,pos); 
        forzar_focus();
    }
} 

function focus_handler() {
    e("focus_handler: he saltado por el evento focus()");
    ponCursorEnPos(2);
    //setTimeout("ponCursorEnPos(2)",1000);
    return false;
}

//hace el focus sin saltar el evento onfocus, es decir, sin saltar focus_handler
function forzar_focus() {
    e("Fuerzo el focus sin que salte el evento onfocus");
    laCaja.onfocus=null;                            //quito
    laCaja.focus();                                    //hago
    setTimeout("laCaja.onfocus=focus_handler",1);    //pongo (retrasado para IE...)
}

laCaja.onfocus=focus_handler;

</script>

</body>
</html>

Saludos.

Asyolath · #3 (**permalink**) 03/05/2007, 16:21

Cuando haces el createRange con el campo vacío es equivalente a hacer el setSelectionRange(0, 0).
Si lo haces con el campo lleno no sabes que rango te va a crear.
Luego, con move("character", n), mueves el rango n posiciones a la derecha (o a la izquierda si es negativo).
Si el rango era (0, 0) y haces el move("character", 2) el rango será (2, 2), luego si haces moveEnd("character", 3) el rango será (2, 2+3) = (2, 5).

Espero haberme explicado bien :D

derkenuke · #4 (**permalink**) 04/05/2007, 18:08

Ah, ok Asyolath, muchas gracias por tu explicación, me falta un poco de teoría en este asunto de las selecciones..

Saludos.