Detectar texto seleccionado con jQuery

Campos de entrada con textarea

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:

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

Cargar la librería jQuery

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

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

Método .select() de jQuery

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’.

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

Recuperar el texto seleccionado

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.

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

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