Detectar texto seleccionado con jQuery

20/Sep/2011 jQuery 6 Comentarios

Cuando ponemos campos de entrada en nuestras páginas web, el usuario podrá seleccionar parte del texto que haya en dichos campos. Vamos a ver como detectar el texto seleccionado utilizando jQuery.

Lo primero será poner un textarea con un texto de ejemplo:

  1. <form id="miform">
  2. <textarea id="texto" rows="20" cols="100">Lorem ipsum dolor sit amet...</textarea>
  3. </form>

Para utilizar jQuery tendremos que cargar la librería de jQuery:

  1. <script type="text/javascript" src="jquery.js"></script>

El método de jQuery que nos ayudará a detectar el texto seleccionado es .select(). Este método habrá que asignarlo al elemento de la página sobre el que queremos detectar el texto seleccionado. En nuestro código el textarea 'texto'.

  1. $("#texto").select(function(){ ... });

El contenido que ha sido seleccionado se puede recuperar mediante el método .getSelection() de Javascript. Así que solo tendremos que ejecutar este método y volcarlo sobre la pantalla.

  1. $("#texto").select(function(){
  2. selectedText = document.getSelection();
  3. $("#resultado").html("Se ha seleccionado el texto " + selectedText);
  4. });

Para volcarlo en pantalla utilizamos el método .html() sobre una capa.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

6 comentarios en “Detectar texto seleccionado con jQuery”

Víctor Cuervo

Lux

Si corre lo que pasa es que si tomamos tal cual el ejemplo falta el div para que muestre el resultado el archivo html quedaría asi:

Lorem ipsum dolor sit amet…

Víctor Cuervo

Víctor Cuervo

Buenas Lux,

Es correcto. En el artículo no se explica la necesidad de crear una capa con el id “resultado”. En concreto yo he utilizado un elemento span.
Si vas al código fuente lo tienes https://github.com/victorcuervo/lineadecodigo_jquery/blob/master/formularios/obtener-texto-seleccionado.html

Gracias por la puntualización.

Saludos.

Víctor Cuervo

Raymi Valdés

El código de jQuery está erroneo, este si funciona.

$(document).ready(function(){
$(“#texto”).select(function(){
$(“#resultado”).html(“Se ha seleccionado el texto ” + $(this).val());
});
});
Saludos.

Víctor Cuervo

Víctor Cuervo

Buenas,

Has probado el ejemplo que tenemos en real. http://lineadecodigo.com/wp-content/uploads/2011/09/obtener-texto-seleccionado.html Por saber si no te funciona y en qué navegador lo has probado. Ya que en todas las pruebas que hemos hecho ha funcionado.

Muchas gracias.

Víctor Cuervo

Víctor Cuervo

@Julian,

Has probado el ejemplo que está en el enlace de la descarga o el de al visualización? te da algún error en la consola javascript?

Saludos.

Víctor Cuervo

Julian

Hola victor, el ejemplo no me sirve, no me recupera el texto.

Los comentarios están cerrados.