namespace Programatik - jQuery: Adicionando dicas de preenchimento nos formulários

« jQuery: Criando um banner com efeitos de transição imagens

Sql-Server: Testar se os valores são igual a Null »

17.10.08

jQuery: Adicionando dicas de preenchimento nos formulários

05:33:52, por mrxrsd

428 visualizações
Categorias: javascript, jquery, design, css

O uso de formulários é a forma mais comum de interação e troca de dados entre usuário-página, porém o formulário sempre obedece certos padrões e tipo de dados e quando isso não é tratado de forma eficiente podemos ter inconsistência na nossa base de dados e erros nos aplicativos.

Resposta:

Essa validações de formulário acabam consumindo nosso servidor com apenas porque pegam o usuário desprevinido por estar desinformado, então sempre procuramos deixar claro qual informação desejamos obter em cada campo.

Vou mostrar abaixo uma dica legal com o uso do jQuery para transmitir dicas do modo de preenchimento do formulário aos usuários.

Primeiro vamos adicionar o script do jQuery

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

Agora iremos configurar o estilo da dica do formulário

CSS:

.tipFocus { color: #aaa; font-style: italic; }

Código do jQuery

Javascript:

<script language="javascript">
$(document).ready(function()
{
        // Quando o input ganhar o focus, verifica se o value dele é igual ao title
        // caso seja, remove o estilo e limpa o campo
    $("input[type=text]").focus(function()
    {
        if ($(this).val() == $(this)[0].title)
        {
            $(this).removeClass("tipFocus");
            $(this).val("");
        }
    });
    
        // Quando o input perder o focus, verifica se o value está em branco
        // caso esteja, adiciona o valor do title no value e adiciona o estilo
    $("input[type=text]").blur(function()
    {
        if ($(this).val() == "")
        {
            $(this).addClass("tipFocus");
            $(this).val($(this)[0].title);
        }
    });
        
        // Chama a função blur para todos os inputs para inicializar o formulário
    $("input[type=text]").blur();        
        
});
</script>

Código da nossa tabela, repare que as dicas estão na propriedade title de cada input.

HTML:

	<table style="width:300px" >
	<tr>
	<td style="width: 100px;">
	Nome
	</td>
	<td >
	<input title="nome e sobrenome" type="text" /></td>
	</tr>
	<tr>
	<td>
	Email
	</td>
	<td>
	<input title="meu@email.com" type="text" /></td>
	</tr>
	<tr>
	<td>
	Telefone
	</td>
	<td>
	<input title="9999-9999" type="text" /></td>
	</tr>
	</table>