Como posso implementar marcas d'água do tipo Stack Overflow em formas?

Question

Lembro -me de ver um tutorial em algum lugar que fala sobre como estilizar seus formulários de entrada de uma maneira mais "utilizável".

Essencialmente, você tem um valor de espaço reservado e, quando entra na entrada, ele esconde a dica, por assim dizer.

Agora, apenas para ficar claro: não quero que a dica (texto do valor do espaço reservado) desapareça no foco, mas sim mais leve quando começo a digitar algo. Bons exemplos:

• Confira os formulários em Aardvark. É exatamente assim que desejo ter meus formulários de entrada.

• Nosso próprio excesso de pilha - quando você tenta fazer uma pergunta, ao clicar em qualquer formulário de entrada, ele não oculta o texto imediatamente. Você vê seu cursor e a dica. Mas quando você começa a digitar, ele esconde a dica. (Eu preferiria que ele vá para uma tonalidade muito mais clara, em vez de se esconder todos juntos, como o exemplo acima de Aardvark.)

Lembro -me de ler muito claramente um tutorial em algum lugar da Interwebz com esse requisito exato, mas eu esqueci de marcar -o como favorito.

Alguma sugestão/links?

Atualização: encontrei recentemente um plugin jQuery Etiquetas em campo Isso faz exatamente o que eu quero. Também, Aqui está o link para uma melhoria do mesmo plug -in.

Answer 1

Você pode querer começar a partir disso:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

Você provavelmente deve ajustar o acima para usar as funções JavaScript de tal maneira para não repetir sua corda de dica três vezes, mas espero que isso possa fazer você seguir na direção certa.

Eu também notei que os formulários "ingressar agora" em Vark.com Defina também a posição do cursor para o início da caixa de texto em vez de deixá -la no final. Isso pode ser um pouco complicado para fazê-lo funcionar transversal, mas você pode querer verificar a solução proposta no artigo a seguir por Josh Stodola:

• Configurando a posição do cursor em uma caixa de texto ou textarea com javascript

Answer 2

Html5 tem o placeholder atributo, que foi projetado para esta mesma tarefa.

Somente o Webkit (o mecanismo de renderização usado no Safari e no Google Chrome) suporta até agora. Você vai querer um fallback de JavaScript como o Daniel para quando o espaço reservado não é suportado.

É trivial verificar se há placeholder Suporte em JavaScript.

Answer 3

Um campo de entrada não pode ter texto padrão e texto digitado ao mesmo tempo. A única maneira possível de alcançar exatamente o que você está pedindo é ter uma imagem de fundo nos campos de entrada com uma imagem que contém o texto padrão que você queria exibir, mas eu altamente Recomendar isso como duas camadas de texto serão muito confusas para o usuário. A maneira mais comum de conseguir isso (e o que é feito no seu exemplo de site Vark.com) é usar o foco Método para limpar o texto:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Para alcançá -lo da maneira como o StackOverflow (e o formulário de inscrição do Vark.com), você pode usar o mesmo método com o keydown evento:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Para alcançar sua mudança de cor no foco e no texto claro no keydown, seria:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Answer 4

Em resposta ao post de @Paul, notei o comportamento do Html5 O espaço reservado age estranhamente no meu emulador de Android. O espaço reservado parece ótimo até você clicar nele e ficar preto com seu cursor à direita da palavra. É verdade que, se você digitar, ele desaparecerá, mas não é intuitivo. Então eu escrevi alguns jQuery Para consertar (onde está meu crachá HTML5/jQuery?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Answer 5

eu escrevi este exemplo que eu - por falta de um nome melhor - chamado de espaço reservado persistente.

Requer um pouco mais de marcação, um div embrulhar a label e input, mas isso resolve muitos outros problemas (como os espaços reservados que entram nos campos de dados ou senha do formulário que não funcionam) e a marcação real é muito limpa para ler. Você acaba com algo assim:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

E depois de incluir o CSS e o JS, ele apenas funciona.