Ввод текста с описательным текстом

Question

Мне было интересно, есть ли простой способ с javascript (включая JQuery, который мы используем на сайте), чтобы поместить описательный текст в текстовый ввод, пока пользователь не щелкнет по нему, чтобы ввести свой собственный текст.

Например, я хотел бы поместить слово «Поиск» в текстовый ввод (предпочтительно более светлым цветом, чем реальный ввод), пока пользователь не щелкнет по вводу, когда он исчезнет и позволит им ввести свои условия поиска.

Я не хочу, чтобы слово «Поиск» было значением для ввода текста, потому что очень важно, чтобы пользователь мог искать слово.

Я думал об абсолютном позиционировании элемента

с поиском слова по вводу и сокрытии его при нажатии (или вводе).

Что ты думаешь? это ужасно ошибочно?

Answer 1

Я недавно наткнулся на плагин jQuery Form Example , который делает именно то, что вы хотите. Страница github для проекта здесь . С помощью этого плагина вы можете отобразить значение заполнителя, которое исчезнет при нажатии, просто так:

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

Answer 2

Вы можете установить начальное значение входных данных для поиска «Поиск», а затем добавить прослушиватель onClick для его удаления.

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

Это не повлияет на способность пользователя искать "поиск". Это гораздо более чистый подход, чем попытка найти элемент <p> или <label> над входом.

РЕДАКТИРОВАТЬ: Вы все абсолютно правы - удаление значения при каждом клике плохой UX. Вот что я получаю за быстрый ответ. :) Обновлено только для удаления начального значения.

Answer 3

Вы можете проверить это: http://www.newmediacampaigns.com/page/nmcformhelper

По сути, HTML 5 поддерживает атрибут placeholder для элементов ввода:

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

WebKit (Chrome и Safari) теперь поддерживает это, но для других браузеров, таких как Firefox и IE, вы можете использовать этот сценарий для имитации эффекта с использованием Javascript, когда браузер не поддерживает функцию HTML 5.

Answer 4

Я искал это решение не так давно и наткнулся на это

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

Я не хочу, чтобы на самом деле слово «Поиск» было значением для ввода текста, потому что очень важно, чтобы пользователь мог искать слово.

В этом случае вы можете использовать фоновое изображение для ввода текста. В CSS вы можете определить, что: у фокуса не должно быть фона, а у необоснованного - его. Это решение работает, даже если JavaScript отключен.

Обновление: протестировано и работает с FF, Opera и Chrome, но не с IE, поскольку IE не поддерживает: focus, но IE поддерживает фоновое изображение, поэтому, если текст светло-серый, это не должно быть проблемой. И вы всегда можете использовать jquery, чтобы изменить классификацию поля ввода.

Answer 6

В течение многих лет существовал популярный «проект», известный как tags.js , изначально написанный Аароном Будманом из старого youngpup.net. Идея все еще существует и существует версия jQuery , даже (демо # 4).

Answer 7

Для справки, эту технику часто называют водяным знаком .

Answer 8

Я бы сделал что-то подобное в jQuery:

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

Таким образом, при повторном нажатии пользователи не потеряют введенное ранее. Значение будет очищено, только если это значение по умолчанию, которое вы назначаете для поля ввода.