Создание «вспомогательного» текста в форме другого цвета по сравнению с напечатанным текстом

Question

<input name="phone" type="text" id="phone" value="Phone #" onfocus="value=''">

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

Во-вторых, при использовании этой методологии (onfocus="value''"), если вы что-то наберете в поле и вернетесь к нему, вам придется перепечатать все, что на самом деле не приемлемо.

Answer 1

Существует отличный, простой плагин jQuery, который будет делать именно то, что вы хотите здесь:

http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/

Достигает желаемого эффекта с помощью CSS.

Здесь есть еще один простой плагин jQuery:

http://fuelyourcoding.com/scripts/infield/

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

Answer 2

Может быть, текст справки должен быть вообще вне поля? «Phone #» больше похож на название поля, чем на текст справки.

Если подсказка не нужна постоянно, может, она вообще не нужна? И если это необходимо, что происходит, когда пользователь что-то набрал? Не должно быть элементов интерфейса или текстов, которые внезапно исчезают.

Answer 3

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

edit: для этого тоже есть плагин jQuery .