Реализация подсказок при вводе текста

Question

У меня есть форма с некоторыми текстовыми вводами: логин, пароль.

Если пользователь видит эту форму в первый раз, тексты ввода должны «содержать» подсказки, такие как «введите логин», «введите пароль».

Если пользователь нажимает на ввод текста, его приглашение должно исчезнуть, чтобы разрешить ввод.

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

Эти изображения появляются со следующим jQuery:

$("form > :text").focus(function(){
   // hide image
}).blur(function(){
   // show image, if text-input is still empty
   if ( $(this).val() == "" )
      // show image with prompt
});

У этого подхода есть следующие проблемы:

• локализация невозможна

• необходимо предварительно визуализировать изображения для различных текстовых подсказок

• накладные расходы с загрузкой изображений

Как вы преодолеваете такие проблемы?

Answer 1

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

Проверьте Форма безумия: Текст заполнителя :

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

А для браузеров, которые его не поддерживают, здесь есть код JavaScript (jQuery), который будет использовать этот текст для имитации того же эффекта: jquery-html5-placeholder-shim .Если вы включили ссылку на шим, просто добавьте ее в свой JavaScript, и все готово.

$(function(){
    $.placeholder.shim();
});

Что касается вопроса локализации, если вы создаете HTML с правильныминформация внутри атрибута placeholder у вас все будет в порядке.

Answer 2

Поскольку Zuul, значение .value может быть отправлено и потенциально может обойти правила и требования по заполнению формы без ввода пользователем чего-либо вообще.Заполнитель - это более мягкое значение, которое форма не распознает как фактическое значение, если оно оставлено не сфокусированным пользователем.

Простое решение, которое включает ваш ответ и более прямо отвечает на вопрос автора, может выглядеть примерно так:

Это очистит текст местозаполнителя, когда поле выделено / сфокусировано, и вернет текст заполнителя, если отменить выбор, при отсутствии ввода в поле, если отмена выбора:

<input type="text" placeholder="1866" onFocus="if (this.placeholder=='1866') this.placeholder = ''" onBlur="if (placeholder=='') this.placeholder='1866'">

Это очистит только текст местозаполнителя.когда пользователь вводит данные в поле, но не раньше:

<input type="text" placeholder="1492">

Эта версия не требует дополнительных действий для работы, как ожидалось.

Приветствия.

Answer 3

Почему вы упрощаете это, просто используя что-то вроде:

<input type="text" name="username" value="Your User Name" onfocus="if (this.value=='Your User Name') this.value = ''">

Если пользователь фокусируется на этом вводе, он удалит текст по умолчанию, позволяя написать какой-нибудь свежий:)