Entrada de texto con texto descriptivo

Question

Me preguntaba si hay una manera fácil con javascript (incluido JQuery, que estamos usando en el sitio) para colocar texto descriptivo en una entrada de texto hasta que el usuario haga clic para escribir su propio texto.

Por ejemplo, me gustaría poner la palabra 'Buscar' en una entrada de texto (preferiblemente en un color más claro que la entrada real) hasta que el usuario haga clic en la entrada, cuando desaparezca y les permita escribir sus términos de búsqueda.

No quiero que la palabra 'Buscar' sea el valor de la entrada de texto, porque es algo importante que el usuario pueda buscar la palabra.

Estaba pensando en el posicionamiento absoluto a < p > elemento con la palabra buscar sobre la entrada y ocultarla cuando se hace clic (o la entrada).

¿Qué te parece? ¿Es esto terriblemente equivocado?

Answer 1

Recientemente me topé con el complemento de ejemplo de formulario jQuery que hace exactamente lo que desea. La página de github para el proyecto es aquí . Con ese complemento, puede mostrar un valor de marcador de posición que desaparecerá al hacer clic con solo esto:

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

Answer 2

Puede establecer el valor inicial de la entrada de búsqueda en " Buscar " y luego agregue un oyente onClick para eliminarlo.

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

No afectará la capacidad del usuario para buscar " search. " Este es un enfoque mucho más limpio que intentar ubicar un elemento <p> o <label> sobre la entrada.

EDITAR: Tiene toda la razón: eliminar el valor de cada clic es una mala experiencia de usuario. Eso es lo que obtengo por responder rápidamente. :) Actualizado para eliminar solo el valor inicial.

Answer 3

Es posible que desee ver esto: http://www.newmediacampaigns.com/page/nmcformhelper

Básicamente, HTML 5 admite el < atributo strong> marcador de posición para elementos de entrada:

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

WebKit (Chrome y Safari) admite esto ahora, pero para otros navegadores como Firefox e IE, puede usar este script para simular el efecto usando Javascript cuando el navegador no admite la función HTML 5.

Answer 4

Durante años ha habido un popular " project " conocido como labels.js , escrito originalmente por Aaron Boodman del viejo youngpup.net. La idea sigue vigente y existe una versión jQuery , incluso (demo # 4).

Answer 5

  

Sin embargo, no quiero que la palabra 'Buscar' sea realmente el valor de la entrada de texto, porque es algo importante que el usuario pueda buscar la palabra buscada.

En ese caso, podría usar una imagen de fondo en la entrada de texto. Puede definir en CSS que: el foco no debe tener el fondo y que los no desenfocados lo deben tener. Esta solución funciona incluso si JavaScript está deshabilitado.

Actualización: Probado y funciona con FF, Opera y Chrome pero no con IE, ya que IE no admite: enfoque, pero IE admite la imagen de fondo, por lo que si el texto es gris claro no debería ser un problema. Y siempre puede usar jquery para cambiar lo que debería tener el campo de entrada.

Answer 6

Estaba buscando esta solución hace poco y me crucé con esto

/**
* @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

Haría algo como esto en jQuery:

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

De esta forma, los usuarios no perderán lo que escribieron previamente al hacer clic nuevamente. El valor solo se borrará si es el valor predeterminado que asigna al campo de entrada.

Answer 8

Como referencia, esta técnica a menudo se llama marca de agua .