Posicion del cursor dentro de un input

Calisco · #1 (**permalink**) 25/07/2007, 15:27

Se puede saber la posición del cursor dentro de un input ?
Saludos.

Calisco · #2 (**permalink**) 25/07/2007, 15:30

Aunque también necesitaría saber si puedo situar el cursor en la posicion que yo quiera. Se que puede sonar medio rallado pero estoy haciendo un validador ... y lo quiero con pitos y flautas.

Panino5001 · #3 (**permalink**) 26/07/2007, 01:28

Fijate si esto te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ejemplo</title>
<script>
function sel(inicio,fin){
input=document.getElementById('area');
if(typeof document.selection != 'undefined' && document.selection){
tex=input.value;
input.value='';
input.focus();
var str = document.selection.createRange();
input.value=tex;
str.move('character', inicio);
str.moveEnd("character", fin-inicio);
str.select();
}
else if(typeof input.selectionStart != 'undefined'){
input.setSelectionRange(inicio,fin);
input.focus();
}
}
function devPos(){
input=document.getElementById('area');
if(typeof document.selection != 'undefined' && document.selection && typeof input.selectionStart == 'undefined'){

var str =document.selection.createRange();
stored_range = str.duplicate();
stored_range.moveToElementText(input);
stored_range.setEndPoint( 'EndToEnd', str );
input.selectionStart = stored_range.text.length - str.text.length;
input.selectionEnd = input.selectionStart + str.text.length;
alert(input.selectionStart)
}else if(typeof input.selectionStart != 'undefined'){
alert(input.selectionStart);
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <textarea name="area" rows="1" id="area" onclick="devPos()">esta es una prueba</textarea>
  <input type="button" name="Submit" value="seleccionar" onclick="sel(8,11)" />
</form>
</body>
</html>

(Si lo convertís a input text el selectionStart no funcionará en explorer.)

derkenuke · #4 (**permalink**) 26/07/2007, 03:05

Yo he estado jugando con lo mismo, y funciona en inputs, pero no lo he probado en <textarea>. Es parecido a lo que te comenta Panino (

)

Bien, aquí tienes getCursorPos(campo) que fíjate en lo que te devuelve:

Código PHP:

  /******** 
    getCursorPos: Me devuelve la posición de inicio y fin de la selección o la posición del | en el campo 
********/ 
function getCursorPos(campo) { 
    if (document.selection) {// IE Support 
        campo.focus();                                        // Set focus on the element 
        var oSel = document.selection.createRange();        // To get cursor position, get empty selection range 
        oSel.moveStart('character', -campo.value.length);    // Move selection start to 0 position 
        campo.selectionEnd = oSel.text.length;                    // The caret position is selection length 
        oSel.setEndPoint('EndToStart', document.selection.createRange() ); 
        campo.selectionStart = oSel.text.length; 
    } 
    return { start: campo.selectionStart, end: campo.selectionEnd }; 
}

Es un objeto con dos propiedades, start y end (inicio y fin de la selección en el campo. Si no hay nada seleccionado, start será igual a end, la posición del cursor en el campo. Me ha sido muy útil para el desafío1. Funciona en IE y en FF.

Luego también querías colocar el cursor en una posición dada:

Código PHP:

  /******** 
    COLOCACIÓN DEL CURSOR: 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){        //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 
    } 
}

Lo único que aquí no lo tengo en genérico, hay que utilizar la variable global laCaja, o modificar la función para pasársela por parámetro, pero esta tirado. También es para IE y FF. También es fácil modificarlo para crear selecciones, en vez de colocar el cursor. Es intuitivo (str.moveEnd("character",x) y laCaja.setSelectionRange(pos,pos+x); ).

Aviso que en Opera he leído que hay problemas, porque utiliza el método estándar, pero da true en document.selection o algo parecido...

Un saludo Calisco

Calisco · #5 (**permalink**) 26/07/2007, 09:10

Lo voy a probar .... estoy con el tema de la guerra de los frameworks ... este script no me puede ganar ...
Gracias

skumblue · #6 (**permalink**) 27/04/2013, 08:51

Muy interesante el tema, también necesito posicionar el cursor en una posición específica, pero no de un input ni un textarea, si no que de un div que uso como campo:

<div contenteditable="true" spellcheck="true"
role="textbox"
aria-multiline="true"
dir="dir"
id="coment"
data-focus="true"></div>

Y no logro que la función me posicione el cursor en algun lugar, solo me funciona el $('#coment').focus() pero en mi caso no me sirve.

Gracias por su ayuda !!