Hoje eu vou criar um experimento bem simples, já que faz um tempinho que não faço experimentos. O experimento é: Recuperar o texto selecionado e exibir qual é este texto; parece uma simulação do copiar e colar… vamos lá:

1  – HTML

O HTML é bem simples, apenas iremos precisar de um botão e uma área para colar o texto selecionado, segue abaixo:

<button>Colar texto</button></pre>
<h3>Resultado:</h3>
<pre>
<!-- Local onde será colado o texto selecionado -->

Depois, para o texto de exemplo, usei um pouco de lorem, mas isto não é necessário mostrar aqui…

2 – Script jQuery

Considerando que você já tenha o jQuery inserido em sua página HTML, é hora de ir para o script que é bem curto e simples. O script também está um pouco comentando:

$(document).ready(function(){

	/**
	 * Copiando seleção
	 */
	$('button').click(function(){

		var texto;

		//Browsers decentes
		if(window.getSelection) {
			texto = String(window.getSelection());

		//IE
		}else if(document.selection){
			texto = document.selection.createRange().text;

		//Pior que o IE oO... existe?
		}else{
			texto = "Seu browser é paia... não dá para fazer isto!";
		}

		/**
		 * Checa se o texto está em branco
		 */
		if(texto == '') texto = "Você deve selecionar algum texto para testar!";

		/**
		 * "Cola" o texto
		 */
		$('#colar').html(texto);
	});

});

3 – O Que Acontece Por Trás das Cortinas…

O evento (cópia) acontece logo depois que é disparando o click no botão. A partir dai, quase não há código jQuery, e sim funções e variáveis do Javascript / Browser. No final de tudo é usado a função .html() do jQuery, que é quem vai colar o texto selecionado.

É importante notar aqui, que cada browser tem uma sintax diferente para recuperar o texto selecionado – e como sempre, o IE tem que ser diferente dos demais, rs… Primeiro identificamos se o browser tem suporte ao método (através da condicional if, elseif e else), se tiver o valor da seleção é atribuida a variável texto, que logo depois é colada no área selecionada. Caso nenhum texto seja selecionado, é exibido um alerta, que também é bem simples.

Como já disse “milhões” de vezes, é um experimento bem simples, mas que pode ser útil à alguém, principalmente para aprender :).

Você pode fazer o download dos arquivos aqui, ou lá encima, no inicio do post. A demonstração está aqui.

Se você ficou tão interessado no tutorial, dê uma olhada nos métodos window.getSelection e document.selection!

Até a próxima.