Detectar texto seleccionado con jQuery

20/Sep/2011 jQuery 6 Comentarios
programación jquery en español

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


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.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*