CSS / Javascript форма на фокуса заполнитель текста все еще там, при наборе исчезают

Question

Я просто пытаюсь понять, как сделать форму, например www.tumblr.com. onFocus заполнитель остается в поле ввода, но при вводе текста текст заполнителя не выполняется. Я знаю, как сделать onFocus через другой учебник, найденный здесь , но мне было интересно, как они сохраняют этот фоновый текст на Focus, но меняют его только при наборе текста.

Answer 1

Они не используют трюк onFocus, чтобы изменить текст.Фактически, они налагают два абсолютно позиционированных блочных элемента на отдельный относительно позиционированный блочный элемент.

Затем они ожидают onKeyUp или какое-либо подобное событие и скрывают элемент «label».

Если вы используете Firebug в Firefox, просто увидеть узлы и CSS, которые создают эффект.Это выглядит примерно так:

HTML

<div class="input_wrapper">
    <label for="user_email">Email</label>
    <input type="text" id="user_email" name="user_email" />
</div>

CSS

.input_wrapper {
    position: relative;
}
.input_wrapper label {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1; /* stack below input */
}
.input_wrapper_focused label {
    /* style label for focused input */
}
.input_wrapper_notempty label {
    visibility: hidden;
}
.input_wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* stack above input */
}

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

Затем вам нужно добавить JS, чтобы добавить и удалить классы input_wrapper_focus / notempty на изменить и keyUp для поля ввода, которое зависит от вашей библиотеки JavaScript или не-библиотечных решений.