Entrée de texte avec un texte descriptif

Question

Je me demandais si javascript (y compris JQuery, que nous utilisons sur le site) était facile à mettre du texte descriptif dans une entrée de texte jusqu'à ce que l'utilisateur clique dessus pour taper son propre texte.

Par exemple, j'aimerais insérer le mot "Rechercher" dans une entrée de texte (de préférence dans une couleur plus claire que l'entrée réelle) jusqu'à ce que l'utilisateur clique sur l'entrée, lorsqu'elle disparaît et lui permet de saisir ses termes de recherche.

Je ne souhaite cependant pas que le mot "Recherche" soit la valeur de la saisie de texte, car il est assez important que l'utilisateur puisse rechercher le mot recherché.

Je pensais au positionnement absolu d'un < p > élément avec le mot chercher sur l'entrée et le masquer lorsque l'on clique dessus (ou l'entrée).

Qu'en penses-tu? est-ce horriblement égaré?

Answer 1

Je suis récemment tombé sur le plug-in Exemple de formulaire jQuery qui fait exactement ce que vous voulez. La page github du projet est ici . Avec ce plugin, vous pouvez afficher une valeur de marque de réservation qui disparaîtra au clic avec juste ceci:

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

Answer 2

Vous pouvez définir la valeur initiale de l'entrée de recherche sur " Search " puis ajoutez un écouteur onClick pour le supprimer.

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

Cela n’affectera pas la capacité de l’utilisateur à rechercher " search. " Cette approche est beaucoup plus simple que d’essayer de définir un élément <p> ou <label> sur l’entrée.

MODIFIER: Vous avez absolument raison: supprimer la valeur à chaque clic est une valeur UX médiocre. C'est ce que je reçois pour répondre rapidement. :) Mis à jour pour ne supprimer que la valeur initiale.

Answer 3

Vous voudrez peut-être vérifier ceci: http://www.newmediacampaigns.com/page/nmcformhelper

Fondamentalement, le HTML 5 prend en charge le < attribut strong> placeholder pour les éléments d'entrée:

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

WebKit (Chrome et Safari) le supporte maintenant, mais pour d'autres navigateurs tels que Firefox et IE, vous pouvez utiliser ce script pour simuler l'effet en utilisant Javascript lorsque le navigateur ne prend pas en charge la fonctionnalité HTML 5.

Answer 4

Depuis des années, un " projet " connu sous le nom labels.js , écrit oralement par Aaron Boodman du vieux youngpup.net. L'idée est toujours d'actualité et il existe une version jQuery , voire même (démo n ° 4).

Answer 5

  

Je ne souhaite cependant pas que le mot "Recherche" soit la valeur de la saisie de texte, car il est assez important que l'utilisateur puisse rechercher le mot recherché.

Dans ce cas, vous pouvez utiliser une image d’arrière-plan pour la saisie de texte. Vous pouvez définir en CSS que: focus ne doit pas avoir l’arrière-plan et que les non-informés doivent l’avoir. Cette solution fonctionne même si le javascript est désactivé.

Mise à jour: testé et fonctionne avec FF, Opera et Chrome, mais pas avec IE, IE ne supporte pas: focus, mais IE supporte l'image d'arrière-plan. Par conséquent, si le texte est gris clair, cela ne devrait pas poser de problème. Et vous pouvez toujours utiliser jquery pour changer le classement du champ de saisie.

Answer 6

Je recherchais cette solution il n'y a pas si longtemps et je suis venu traverser ceci

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

Je voudrais faire quelque chose comme ça dans jQuery:

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

Ainsi, les utilisateurs ne perdront pas ce qu’ils ont tapé précédemment en cliquant à nouveau. La valeur ne sera effacée que s'il s'agit de la valeur par défaut que vous affectez au champ de saisie.

Answer 8

Pour référence, cette technique est souvent appelée filigrane .