Recuperando texto selecionado

Recuperando texto selecionado

Este artigo demonstra como recuperar o texto selecionado em uma página web o que é muito importante quando é preciso gerar Links dinâmicos, o artigo será dividido em duas partes;

Parte 1: Usaremos Javascript, onde criaremos a função que recupera o texto selecionado;

Parte 2: Usaremos a interface de uma página asp.net, para disparar o método javascript e exibir o texto selecionado.

Criar o Projeto para teste

Primeiro vamos abrir o visual studio e criar um projeto web para desenvolver nossa aplicação teste como demonstrado na figura 1.

Figura 01. Criar o projeto.

Depois de criar abriremos a página Default.aspx no modo source do design para adicionarmos a função javascript abaixo.

Parte 1 – Criar a função “copiarSelecao” ;

<SCRIPT language="JavaScript">

function copiarSelecao() {

var TextoSelecionado = document.selection;

if (TextoSelecionado.type == 'Text') { 

var newRange = TextoSelecionado.createRange();

document.form1.txtSelecionado.value = newRange.text;

} else {

  alert('Selecione o texto');

}

}

 </script>  

Depois de criar a função “copiarSelecao”, adicionaremos o seguinte código HTML, para criar a interface que nos ajudará a testar nossa função;

<table width=60% height=60% align=center border=2>

<tr>

<td align=center valign=top width=40% >

<br />

<asp:Label ID=lblTexto runat=server BackColor="White" Font-Bold="True" ForeColor="Red">SELECIONE O TEXTO</asp:Label>

<br />

<br />

<asp:TextBox ID="txtTexto" runat=server Width="536px">O TEXTO SELECIONADO SERÁ CARREGADO NO LABEL</asp:TextBox>

<br />

<asp:Label ID=Label1 runat=server BackColor="White" Font-Bold="True" ForeColor="Red">TEXTO SELECIONADO</asp:Label><br />

<br />

<asp:Label ID=lblTextoSelecionado runat=server Width="536px" Font-Bold="True" ForeColor="Blue"></asp:Label>

<br />

<br />

<asp:Button ID="btnExecutar" runat="server" Text="Recuperar Seleção do Texto" /></td>

</tr>

<input id="txtSelecionado" type="hidden" name="txtSelecionado" runat="server">

</table>

Parte 2 – Criar a chamada da função “copiarSelecao” no código C# onde faremos a adicionaremos um atributo ao botão “btnExecutar” que vai disparar o método criado anteriormente.

using System;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

try

{

if (!IsPostBack)

{

  btnExecutar.Attributes.Add("OnClick", "copiarSelecao()");

}

  lblTextoSelecionado.Text = txtSelecionado.Value;

}

catch (Exception ex)

{

throw ex;

}

}

} 

A figura 2, demonstra o resultado do nossa aplicação;

Figura 02. Resultado.

Como vimos, a aplicação é bastante simples. Depois disso é só usar a imaginação para criar novas implementações.

Um grande abraço e até a próxima...

Humberto Lins.