Tutorial – Copiando Seleção com jQuery

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á:

Demonstração | Download dos arquivos

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 :).

É possível fazer múltiplas seleções, usando CTRL, ou Shit, enfim, qualquer modo de seleção é valido…

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.

4 Comentários

  1. Daniel Carloni disse:
    22 de janeiro de 2012 às 21:21

    foi útil a mim valeu

  2. Cícero Joceilton disse:
    24 de outubro de 2015 às 07:17

    //Pior que o IE oO… existe?
    kkkkkkkkkkkkkkkkk

  3. Amanda disse:
    22 de junho de 2016 às 15:55

    Foi perfeito pra mim .. detalhe, em 2016.

  4. Filipe disse:
    17 de setembro de 2016 às 11:43

    Olá, bom dia.

    Excelente artigo.

    Estou precisando usar uma lógica parecida, mas o que eu preciso eh pintar o texto. Pra fazer um marca texto sabe.

    Sabe como isso poderia ser feito?

Faça um Comentário