Entrada de texto com texto descritivo

Question

Eu queria saber se há uma maneira fácil com javascript (incluindo JQuery, que estamos usando no site) para colocar um texto descritivo em uma entrada de texto até que o usuário clica-lo para digitar em seu próprio texto.

Por exemplo, eu gostaria de colocar a palavra 'Search' em uma entrada de texto (de preferência em uma cor mais clara do que a entrada real) até que o usuário clica a entrada, quando desaparece e lhes permite digitar seus termos de pesquisa.

Eu não quero realmente ter a palavra 'Pesquisar' ser o valor da entrada de texto, porém, porque é um pouco importante que o usuário pode procurar a busca da palavra.

Eu estava pensando em posicionamento absoluto um

elemento com a palavra de pesquisa sobre a entrada e escondendo-lo quando ele (ou a entrada) é clicado.

O que você acha? é esta terrivelmente equivocada?

Answer 1

Recentemente, esbarrou na href="http://mucur.name/system/jquery_example/" rel="nofollow noreferrer"> jQuery Exemplo que faz exatamente o que você quer. A página github para o projeto é aqui . Com esse plugin, você pode exibir um valor de espaço reservado que vai desaparecer no clique com apenas isto:

$('input#search').example('Search');

Answer 2

Você pode definir o valor inicial da entrada da pesquisa para "Pesquisar" e, em seguida, adicione um ouvinte de onClick para removê-lo.

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

Ele não terá impacto sobre a capacidade do usuário de pesquisa para "pesquisa". Esta é uma abordagem mais limpo muito do que tentar finagle um <p> ou elemento <label> sobre a entrada.

EDIT: Você está tudo absolutamente certo - removendo o valor em cada clique é pobre UX. Isso é o que eu ganho por responder rapidamente. :) Atualizado para remover somente o valor inicial.

Answer 3

Você pode querer verificar isso: http://www.newmediacampaigns.com/page/nmcformhelper

Basicamente, HTML 5 suporta o < strong> espaço reservado atributo para elementos de entrada:

<input type="text" placeholder="Your browser supports placeholder text" size=38>

WebKit (Chrome e Safari) suporta isso agora, mas para outros navegadores como Firefox e IE, você pode usar esse script para simular o efeito usando Javascript quando o navegador não suporta o recurso de HTML 5.

Answer 4

Durante anos tem havido um "projeto" popular conhecido como etiquetas. js , orignally escrito por Aaron Boodman do velho youngpup.net. A idéia ainda está por aí e existe uma jQuery versão , mesmo (demo # 4).

Answer 5

Eu não quero realmente ter a palavra 'Pesquisar' ser o valor da entrada de texto, porém, porque é um pouco importante que o usuário pode procurar a busca da palavra.

Nesse caso, você pode usar uma imagem de fundo na-entrada de texto. Você poderia definir no CSS que: foco não deve ter o fundo e que o unfoucused deve tê-lo. Esta solução funciona mesmo se o javascript está desativado.

Update: Testado e trabalhar com FF, Opera e Chrome, mas não IE, uma vez que o IE não suportam: foco, mas IE suporta a imagem de fundo, por isso, se o texto é luz é cinza não deve ser um problema. E você sempre pode usar jquery para mudar o que classificou o campo de entrada deve ter.

Answer 6

Eu estava procurando por esta solução não muito tempo atrás e veio cruzada este

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
*/

(function ($) {

$.fn.hint = function (blurClass) {
  if (!blurClass) { 
    blurClass = 'blur';
  }

  return this.each(function () {
    // get jQuery version of 'this'
    var $input = $(this),

    // capture the rest of the variable to allow for reuse
      title = $input.attr('title'),
      $form = $(this.form),
      $win = $(window);

    function remove() {
      if ($input.val() === title && $input.hasClass(blurClass)) {
        $input.val('').removeClass(blurClass);
      }
    }

    // only apply logic if the element has the attribute
    if (title) { 
      // on blur, set value to title attr if text is blank
      $input.blur(function () {
        if (this.value === '') {
          $input.val(title).addClass(blurClass);
        }
      }).focus(remove).blur(); // now change all inputs to title

      // clear the pre-defined text when form is submitted
      $form.submit(remove);
      $win.unload(remove); // handles Firefox's autocomplete
    }
  });
};

})(jQuery);


$(function(){ 
    // find all the input elements with title attributes
    $('input[title!=""]').hint();
});

Answer 7

eu faria algo como isso em jQuery:

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

Desta forma, os usuários não perderão o que digitou anteriormente ao clicar novamente. O valor só seria apagada se é o valor padrão que você atribui ao campo de entrada.

Answer 8

Para referência, esta técnica é muitas vezes chamado watermarking .