Copiando Script

 

 

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)

 

<fieldset style="width:50%">

<table width="100%" cellspacing="0" cellpadding="5">

    <tr style="background-color:#f1f1f1; font-family:Verdana; font-size:11px;">

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

        <td align="right">

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

        </td>

    </tr>

    <tr>

        <td style="background-color:#dedede;" colspan="2">

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

 

<script type="text/javascript">

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)

 

<script type="text/javascript">

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>

<fieldset style="width:50%">

<table width="100%" cellspacing="0" cellpadding="5">

    <tr style="background-color:#f1f1f1; font-family:Verdana; font-size:11px;">

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

        <td align="right">

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

        </td>

    </tr>

    <tr>

        <td style="background-color:#dedede;" colspan="2">

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

 

 

 

Mauricio Junior

www.aspneti.com

www.ascompras.com