Ввод HTML/CSS / textarea, текст по умолчанию и цвета

два полу-родственные вопросы:

1) я видел <input> и <textarea> поля, содержащие текст по умолчанию, например "введите здесь условия поиска", и в тот момент, когда вы нажимаете на поле, текст исчезает. Как это реализуется? Это вещь Javascript?

2) может ли текст по умолчанию быть в одном цвете, и что бы вы ни вводили (перезапись или добавление), быть в другом цвете?

6
css textarea

2 ответов

Не уверен, почему выше помечено как ответ, потому что на самом деле он не отвечает на вопрос. Надеюсь это:

HTML4

<label for="name">Name</label>    
<input type="text" name="name" value="Enter your full name"  onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" />

позволяет сломать его:

value="Enter your full name"

это добавляет строку текста по умолчанию в ваш ввод.

<textarea>Enter your comment</textarea>

то же самое может быть достигнуто с textarea, введя текст между тегами.

onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};"

если на вход получает фокус (т. е. нажимается или вкладывается to) мы проверяем, равен ли текущий входной текст нашей текстовой строке по умолчанию "введите свое полное имя". Если мы ставим его на пустую строку и изменить цвет шрифта.

onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}

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

в HTML5

<input type="text" name="name" placeholder="Enter your full name">
<textarea placeholder="Enter your comment"></textarea>

HTML5 имеет встроенный атрибут 'заполнитель' для этого который может быть оформлен следующим образом:

::-webkit-input-placeholder  { color:#555; } /* Webkit */
:-moz-placeholder { color:#555; }  /* Firefox <= 18 */
::-moz-placeholder { color:#555; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: #555; } /* Internet Explorer */

пример

22

  1. они называются входным водяным знаком. Вы можете найти много плагинов jquery для этого. Это один из них

  2. вы можете управлять текстом водяного знака с помощью css

1