Copiando Script

ASP.NET

Saturday, January 1, 2011

Bom pessoal resolvi mostrar a todos o quanto é fácil e rápido usar apenas javascript e html para copiar um código apenas com um clique. Usarei apenas o editor Visual Studio .NET 2005, Javascript e HTML.

Geralmente vemos na internet ou aplicação local, que com um clique o Windows executa e copia todo código mostrado na aplicação e assim podemos colar em qualquer parte de qualquer outro documento. Esse é o objetivo do Copiando Script.

HTML Code

O primeiro de tudo, criei um HTML com table, tr e td. Dentro da td foi colado um código normal com a tag <pre> onde fica o código c# do programa pronto para ser copiado. (Referência Code.1.1)

<td align="left">Código C# </td>

<span onclick="CopyCode(this)" style="cursor:hand"><b>[ Copiar Código ]</b></span>

</td>

</tr>

<tr>

<pre><br />if(i==0){ i+=1; } <br />Response.Write(i.ToString());</pre>

</td>

</tr>

</table>

</fieldset>

Referência: Code.1.1

Note que o HTML é simples com algumas tags que talvez você nunca tenha prestado atenção. Dentro da segunda td, possui uma tag <span>. (Referência Code.1.2)

<span onclick=" CopyCode(this)" style="cursor:hand"><b>[ Copiar Código ]</b></span>

Referência: Code.1.2

Essa tag <span> possui o atributo onclick para chamar um link ou uma função JavaScript. O segundo código que talvez não tenha prestado atenção é o <pre> que tem a finalidade de mostrar o código descrito da mesma forma que está no código HTML. (Referência Code.1.3)

<pre><br />if(i==0){ i+=1; } <br />Response.Write(i.ToString());</pre>

Referência: Code.1.3

O resultado final da tela HTML criada anteriormente é a seguinte. (Referência Code.1.4)

Referência: Code.1.4

Depois de ter todo código HTML construído, basta fazer a parte em JavaScript. A idéia é percorrer uma tr e copiar o código dentro dela. (Referência Code.1.5)

function CopyCode(key)

{

var trElements = document.all.tags("tr");

var i;

for(i = 0; i < trElements.length; ++i)

{

if(key.parentElement.parentElement.parentElement == trElements[i].parentElement)

{

window.clipboardData.setData("Text", trElements[i].innerText);

}

</script>

Referência: Code.1.5

A function chama-se CopyCode(key) que espera um parâmetro de entrada chamado key. Percorro todas as tags do tipo tr e se a chave for igual ao elemento, executo o comando responsável para copiar um Text dentro da tr.

O código responsável para copiar o texto é o:

window.clipboardData.setData("Text", trElements[i].innerText);

Referência: Code.1.6

Para não ficar totalmente perdido, segue todo código da página para melhor entendimento. (Referência Code.1.7)

function CopyCode(key)

{

var trElements = document.all.tags("tr");

var i;

for(i = 0; i < trElements.length; ++i)

{

if(key.parentElement.parentElement.parentElement == trElements[i].parentElement)

{

window.clipboardData.setData("Text", trElements[i].innerText);

}

</script>

<td align="left">Código C# </td>

<span onclick="CopyCode(this)" style="cursor:hand"><b>[ Copiar Código ]</b></span>

</td>

</tr>

<tr>

<pre><br />if(i==0){ i+=1; } <br />Response.Write(i.ToString());</pre>

</td>

</tr>

</table>

</fieldset>

Referência: Code.1.7

Mostrado todo código, mostrarei o resultado final através do layout.

Referência: Code.1.8

Cliquei em cima do [ Copiar Código ]. Abri o notepad e fui ao menu Editar > Colar. (Referência Code.1.9)

Referência: Code.1.9

Por fim, escolhi a opção Colar. Veja o resultado final dentro do programa notepad. (Referência Code.1.10)

Referência: Code.1.10

Note que na referência Code.1.10 foi colado exatamente o código C#.NET descrito anteriormente. Bom, esse foi o meu objetivo, espero que tenham gostado. Qualquer dúvida, favor entrar em contato através do e-mail mauricio@aspneti.com.