Caixa de texto para Blog com Seleção automática

Por:

| 16 de abr de 2011

A maioria dos blogs que conhecemos possui um 'banner' com uma caixinha de texto logo abaixo que é usada para armazenar o código HTML de incorporação com a imagem do logotipo de blog.
Algumas dessas 'caixinhas' possuem a função de selecionar automaticamente quando se passa o cursor do mouse ou ainda quando a pessoa clica dentro da caixinha.
Estarei ensinando neste tutorial, como fazer estes dois tipos de caixinha de texto.

Seleciona quando passar o cursor do mouse...
O código para a caixa de texto que seleciona quando se passa o cursor do mouse sobre ela é:

<textarea onfocus="this.select()" onmouseover="this.focus()"> SEU TEXTO AQUI </textarea>

É só substituir o SEU TEXTO AQUI pelo que você quiser que seja apresentado dentro da caixinha.
Deverá ficar assim:



Seleciona quando clica...
Se quiser que a sua caixa de texto seja a de selecionar automaticamente quando clica, o código é este:

<textarea onclick="select();" rows='3' cols='12' name="text" title="Utilize Ctrl+C para copiar e Ctrl+V para colar">SEU TEXTO AQUI</textarea>

O processo é o mesmo da outra caixinha, em SEU TEXTO AQUI, você coloca o texto que queira dentro da caixinha.

Se desejar pode digitar um outro texto descritivo em title="Utilize Ctrl+C para copiar e Ctrl+V para colar", substituindo toda a parte em vermelho pelo texto de sua preferência.

O trecho rows='3' é responsável pela altura da caixa de texto, e o trecho cols='12' é responsável pela largura.
É só ir alterando as partes em vermelho até achar o tamanho desejado para a caixinha de texto.

Obs: nas medidas cols e rows procure usar aspas simples ( ' ) e não aspas duplas ( " ), ou pode não funcionar direito.

Ficará assim:



Pronto!
Gerador de Senha - Crie senhas mais seguras
- Topo