Seleccionar contenido de un Textarea

Escrito por J.F. el Lunes, 16 de Julio del 2007 a las 16:03

Seguro que en alguna ocasión has visto como dentro de un textarea había texto, y al pinchar en un vínculo, se selecciona todo el contenido. Otra opción es que al situar el foco dentro de ese textarea se seleccione también todo el contenido, algo similar a lo que ocurre cuando copiamos el código de los anuncios de Google Adsense. Pues bien, veamos como podemos implementar dichos sitemas gracias a Javascript. La función a usar en éste caso es la siguiente. Puedes colocarla como siempre donde quieras, en una hoja aparte donde estén todas tus funciones Javascript o en el head de la página en el que lo vayas a usar:

TEXTO PLANO

JavaScript:

1. <script language="Javascript">
2. <!--
3. var copytoclip=1
4.  
5. function SeleccionarTodo(theField) {
6. var tempval=eval("document."+theField)
7. tempval.focus()
8. tempval.select()
9. if (document.all&&copytoclip==1){
10. therange=tempval.createTextRange()
11. therange.execCommand("Copy")
12. }
13. }
14. //-->
15. </script>

Una vez definida la función, veamos la forma de usarla. En primer lugar vamos a explicar como hacer un vínculo para que, al ser pulsado se seleccione todo el contenido:

TEXTO PLANO

HTML:

1. <form name="formulario">
2. <a  href="javascript:SeleccionarTodo('formulario.cuadro')">Seleccionar</a><br />
3. <textarea name="cuadro" rows="10" cols="20">Texto que se encuentra dentro del text area. Si pinchas en seleccionar (arriba)
4. se seleccionará todo.</textarea>

Así al pulsar en "Seleccionar" todo el contenido será seleccionado. Si queremos que se seleccione al situar el foco dentro del textarea tan sólo deberemos hacer lo siguiente:

TEXTO PLANO

HTML:

1. <form name="formulario">
2. <textarea name="cuadro" rows="10" cols="20" onFocus="javascript:SeleccionarTodo('formulario.cuadro')">Texto que se encuentra dentro del text area. Si pinchas en seleccionar (arriba)
3. se seleccionará todo.</textarea>

Como vemos, tan solo hay que hacer la llamada a la función

TEXTO PLANO

JavaScript:

1. "javascript:SeleccionarTodo('formulario.cuadro')"

cuando queramos. Para el primer caso la incluíamos en un href de un vínculo, y en éste último le añadíamos al textarea la propiedad onFocus que llamaba a la función para que se ejecutara al posar el cursor del ratón. Si lo deseamos podemos utilizar los 2 sistemas, para poner el vínculo y para que funciona al posar el cursor. Puedes ver funcionando los 2 sistemas en el ejemplo.
Ver ejemplo: | Seleccionar contenido de un Textarea

Categoria: Javascript

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas