Adicionar marca d’ água em inputs text com JQuery

Olá pessoal.

Neste post vou explicar como aplicar marca d’ água em inputs do tipo text usando a biblioteca JQuery.

Vamos lá.

Baixe a biblioteca JQuery em http://www.jquery.com/ e adicione ao projeto.

O código abaixo (Javascript e com uso da JQuery) aplica o feito de marca d’ água.  Cole o código num arquivo arquivo Javascript (.js) associado ao projeto.

jQuery(document).ready(function () {

    //recuperando todos os inputs que tenham um atributo data-marcadagua.
    var inputs = $('*[data-marcadagua]')

    //tratando CADA input recuperado na linha acima.
    jQuery.each(inputs, function () {

        //se o input atual não tem valor, então aplica a marca d' água
        if (jQuery.trim($(this).val()) == '') {
            aplicaMarca($(this));

        }

        //adicionando os manipuladores para os eventos de entrada e saída em cada input.
        $(this).bind('focusin',
								function () {
                                    //revomendo a marca d' água quando o input ganha o foco.
								    if ($(this).val() == $(this).attr('data-marcadagua')) {
								        limpaMarca($(this))
								    }
								}
						);
        $(this).bind('focusout',
								function () {
                                    //aplicando a marca d' água quando o input perde o foco e não tem valor.
								    if (jQuery.trim($(this).val()) == '') {
								        aplicaMarca($(this));
								    }
								}
					   );

    });

    function aplicaMarca(input) {
        input.css('font-style', 'italic');
        input.css('color', '#666');
        input.val(input.attr('data-marcadagua'));
    }

    function limpaMarca(input) {
        input.css('font-style', '');
        input.css('color', '');
        input.val('');
    }

});

No HEAD da página HTML, faça a vinculação da biblioteca JQuery e do arqvivo de script com o código acima.

<head>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="marcadagua.js"></script>
</head>

A ideia aqui e adicionar aos inputs text da página um atributo chamado data-marcadagua, e o valor seu valor será o texto da marca d’ água.

Valor 1:
<input id="Text1" type="text" data-marcadagua="1 - Digite algo aqui..." value="Já tenho valor"/>
<br />
<br />
Valor 2:
<input id="Text2" type="text" data-marcadagua="2 - Digite algo aqui..."/>
<br />
<br />
Valor 3:
<input id="Text3" type="text" data-marcadagua="3 - Digite algo aqui..."/>
<br />
<br />
Valor 4:
<input id="Text4" type="text" data-marcadagua="4 - Digite algo aqui..."/>

No exemplo acima usei diretamente um input HTML. Para usar no controle TextBox do ASP.NET, no evento Page_Load utilize o método Add da propriedade Attribute.

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1.Attributes.Add("data-marcadagua", "5 - Digite algo aqui...");
}

O resultado final:

Baixe aqui o exemplo completo.

Até mais…

Uma ideia sobre “Adicionar marca d’ água em inputs text com JQuery

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *