explorer: cursor en textarea

caricatos · #1 (**permalink**) 10/05/2004, 03:36

Hola amigos:

Antes de nada voy a compartir algo que he descubierto hace poquísimo para saber en un textarea donde se encuentra el cursor y si existe algún texto seleccionado.
Las propiedades (o atributos) selectionStart y selectionEnd. De paso pongo la página de prueba que usé:

Código PHP:

  <html>

<head>

<script>

function datos()    {

    with (document.forms["prueba"])    {

        inicio.value = texto.selectionStart;

        fin.value = texto.selectionEnd;

        longitud.value = texto.selectionEnd - texto.selectionStart;

    }

}

 
</script>

</head>

<body onload="datos(); with (document.forms[0].texto) {onclick = datos; onkeyup = datos;}">

<form name="prueba">

    <textarea name="texto" rows="10" cols="40">Prueba</textarea>

    <br />

    inicio:

    <input name="inicio" type="text" value="" size="4"> 

    fin:

    <input name="fin" type="text" value="" size="4"> 

    longitud de selección:

    <input name="longitud" type="text" value="" size="6"> 

</form>

</body>

</html>

Se puede ver que realmente es fácil su uso, pero no funciona en explorer...

Para ese caso yo mismo he sugerido en más de una ocasión el código de este mismo foro, pero sinceramente no lo acabo de entender. Buscando en la red no encontré nada mejor, pero supongo que debe existir algo más fácil y comprensible.

Saludos

caricatos · #2 (**permalink**) 10/05/2004, 16:20

Hola otra vez:

La verdad es que la posición no he podido conseguirla, pero la longitud de la selección sí, basándome en el código de los foros (también creo que están en las FAQs).

Y con relativamente poco código se consigue reemplazar selecciones (o insertar donde se encuentra el cursor) funcionando bien en ambos navegadores...

... La verdad es que no he podido conseguirlo en opera (¿?)

Aquí pongo el código nuevo:

Código PHP:

  <html>

<head>

<script>

function datos_ie() {

    with (document.forms["prueba"])    {

        txt = document.selection.createRange().text;

        if (texto.createTextRange)    {

            texto.posi = document.selection.createRange().duplicate();

            longitud.value = texto.posi.text.length;

        }

        else

            longitud.value = 0;

    }

    return true;

}

 
function datos_mo()    {

    with (document.forms["prueba"])    {

        inicio.value = texto.selectionStart;

        fin.value = texto.selectionEnd;

        longitud.value = texto.selectionEnd - texto.selectionStart;

    }

}

 
var ie = /msi/i.test(navigator.userAgent);

var op = /opera/i.test(navigator.userAgent);

var mo = /gecko/i.test(navigator.userAgent);

 
function poner_mo()    {

    f = document.forms["prueba"];

    var insertor = f.insertarTexto.value;

    var inicio = f.texto.value.substr(0, f.texto.selectionStart);

    var fin = f.texto.value.substr(f.texto.selectionEnd, f.texto.value.length);

    f.texto.value = inicio + insertor + fin;

}

 
function poner_op()    {

    f = document.forms["prueba"];

    var insertor = f.insertarTexto.value;

    f.texto.value += insertor;

}

 
function poner_ie()    {

    f = document.forms["prueba"];

    var insertor = f.insertarTexto.value;

    if (f.texto.createTextRange && f.texto.posi) {

        var poner = f.texto.posi;

        poner.text = poner.text.charAt(poner.text.length - 1) == ' ' ? insertor + ' ' : insertor;

    }

    f.texto.focus();

}

 
function ini()    {

    if (mo)    {

        with (document.forms["prueba"])    {

            inicio.value = texto.selectionStart;

            fin.value = texto.selectionEnd;

            longitud.value = texto.selectionEnd - texto.selectionStart;

            texto.onkeyup = datos_mo;

            texto.onclick = datos_mo;

            insertar.onclick = poner_mo;

        }

    }

 
    if (op)    {

        with (document.forms["prueba"])    {

            insertar.onclick = poner_op;

        }

    }

 
    if (ie)    {

        with (document.forms["prueba"])    {

            inicio.value = 0;

            fin.value = 0;

            longitud.value = 0;

            texto.onkeyup = datos_ie;

            texto.onclick = datos_ie;

            insertar.onclick = poner_ie;

        }

    }

 
//    alert("explorer: " + ie + "\nopera: " + op + "\nmozilla: " + mo);

 
}

</script>

</head>

<body onload="ini()">

<form name="prueba">

    <textarea name="texto" rows="10" cols="40" wrap="virtual">Prueba</textarea>

    <br />

    inicio:

    <input name="inicio" type="text" value="" size="4">

    fin:

    <input name="fin" type="text" value="" size="4">

    longitud de selección:

    <input name="longitud" type="text" value="" size="6">

    <br />

    texto a insertar: 

    <input name="insertarTexto" type="text" value="" size="14">

    <input name="insertar" type="button" value="Insertar" >

    

</form>

</body>

</html>

Saludos