Inserimento di testo con testo descrittivo

Question

Mi chiedevo se esiste un modo semplice con javascript (incluso JQuery, che stiamo utilizzando sul sito) di inserire un testo descrittivo in un input di testo fino a quando l'utente non fa clic su di esso per digitare il proprio testo.

Ad esempio, vorrei inserire la parola "Cerca" in un input di testo (preferibilmente in un colore più chiaro rispetto all'input reale) fino a quando l'utente non fa clic sull'input, quando scompare e consente loro di digitare i termini di ricerca.

Tuttavia, non voglio che la parola "Cerca" sia il valore dell'input di testo, poiché è in qualche modo importante che l'utente possa cercare la ricerca di parole.

Stavo pensando al posizionamento assoluto a < p > elemento con la parola cerca sopra l'input e nascondendolo quando si fa clic (o l'input).

Cosa ne pensi? è orribilmente fuorviato?

Answer 1

Di recente mi sono imbattuto nel plug-in di esempio jQuery Form che fa esattamente quello che vuoi. La pagina github per il progetto è qui . Con quel plugin, puoi visualizzare un valore di segnaposto che svanirà al clic con questo:

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

Answer 2

È possibile impostare il valore iniziale dell'input di ricerca su " Cerca " e quindi aggiungere un listener onClick per rimuoverlo.

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

Non influirà sulla capacità dell'utente di cercare " search. " Questo è un approccio molto più pulito rispetto al tentativo di raggruppare un elemento <p> o <label> sull'input.

MODIFICA: hai perfettamente ragione: rimuovere il valore su ogni clic è scarsa UX. Questo è quello che ottengo rispondendo rapidamente. :) Aggiornato per rimuovere solo il valore iniziale.

Answer 3

Potresti voler dare un'occhiata: http://www.newmediacampaigns.com/page/nmcformhelper

Fondamentalmente, HTML 5 supporta il < strong> segnaposto per gli elementi di input:

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

WebKit (Chrome e Safari) ora supporta questo, ma per altri browser come Firefox e IE, puoi usare questo script per simulare l'effetto usando Javascript quando il browser non supporta la funzione HTML 5.

Answer 4

Per anni c'è stato un popolare " progetto " noto come labels.js , scritto ufficialmente da Aaron Boodman del vecchio youngpup.net. L'idea è ancora in corso ed esiste una versione jQuery , anche (demo # 4).

Answer 5

  

Tuttavia, non voglio che la parola "Cerca" sia il valore dell'input di testo, poiché è in qualche modo importante che l'utente possa cercare la ricerca di parole.

In tal caso, è possibile utilizzare un'immagine di sfondo nell'input di testo. Nel CSS potresti definire che: focus non dovrebbe avere lo sfondo e che il non motivato dovrebbe averlo. Questa soluzione funziona anche se JavaScript è disabilitato.

Aggiornamento: testato e funzionante con FF, Opera e Chrome ma non IE, poiché IE non supporta: focus, ma IE supporta l'immagine di sfondo, quindi se il testo è grigio chiaro non dovrebbe essere un problema. E puoi sempre usare jquery per cambiare ciò che dovrebbe essere classificato nel campo di input.

Answer 6

Stavo cercando questa soluzione non molto tempo fa e mi sono imbattuto questo

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

Vorrei fare qualcosa del genere in jQuery:

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

In questo modo gli utenti non perderanno ciò che hanno digitato in precedenza facendo di nuovo clic. Il valore verrebbe cancellato solo se è il valore predefinito assegnato al campo di input.

Answer 8

Per riferimento, questa tecnica è spesso chiamata filigrana .