Как я могу использовать водяные знаки с переполнением стека в форме?

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

По существу, у вас есть значение placeholder, и когда вы вводите ввод, он скрывает подсказку, чтобы говорить.

Теперь, чтобы быть ясным: я не хочу, чтобы подсказка (текст значения места) исчезла в фокусе, а скорее стала легче, когда я впервые набрал что-то. Хорошие примеры:

Ознакомьтесь с формами на Aardvark. Именно так я хочу иметь свои входные формы.
Наш собственный переполнение стека - при попытке задать вопрос, щелкнув внутри любой формы ввода, он сразу не скрывает текст. Вы видите свой курсор, а также подсказку. но когда вы начинаете печатать, он скрывает намек. (Я бы предпочел, чтобы он перешел в гораздо более светлый оттенок, а не скрывал все вместе, как, например, приведенный выше пример Aardvark.)

Я очень хорошо читаю учебник где-то на interwebz с этим точным требованием, но черт, я забыл пометить его.

Любые предложения/ссылки?

[Обновление: Недавно я нашел плагин jQuery Ярлыки In-Field, который делает именно то, что я хочу. Кроме того, здесь ссылка для улучшения одного и того же плагина. ]

Ответ 1

Вы можете начать с этого:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }">

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

Я также заметил, что формы "Join Now" на vark.com также устанавливают позицию курсора в начало текстового поля вместо оставить его в конце. Это может быть сложным, чтобы заставить работать кросс-браузер, но вы можете проверить решение, предложенное в следующей статье Джош Стодола:

Установка позиции курсора в текстовом поле или в TextArea с помощью Javascript

Ответ 2

HTML5 имеет атрибут placeholder, который предназначен для этой самой задачи.

Пока поддерживается только WebKit (механизм рендеринга, используемый в Safari и Google Chrome). Вам понадобится резервное копирование JavaScript, например, Daniels, поскольку поддержка placeholder не поддерживается.

Его тривиально для проверить поддержку placeholder в JavaScript.

Ответ 3

В поле ввода не может быть как текст по умолчанию, так и введенный пользователем текст одновременно. Единственный возможный способ добиться именно того, что вы просите, - иметь фоновое изображение в поля ввода с изображением, содержащим текст по умолчанию, который вы хотите отобразить, но я настоятельно рекомендую против этого, поскольку два слоя текста будут очень запутанными для пользователь. Наиболее распространенный способ достижения этого (и то, что делается на вашем примере сайта vark.com) - использовать метод focus для очистки вне текста:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Чтобы достичь этого, как StackOverflow (и форма регистрации Vark.com), вы можете использовать тот же метод с keydown

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

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

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Ответ 4

В ответ на сообщение @Paul я заметил, что поведение заставки HTML5 странно действует на мой эмулятор Android. Заполнитель отлично смотрится, пока вы не нажмете на него, и он станет черным, а ваш курсор окажется справа от слова. Конечно, если вы наберете его, он исчезнет, но он не будет интуитивным. Поэтому я написал несколько jQuery, чтобы исправить это (где мой значок HTML5/jQuery?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Ответ 5

Я написал этот пример, который я - из-за отсутствия лучших именных постоянных заполнителей.

Для этого требуется немного больше разметки, div обертка label и input, но это решает много других проблем (например, заполнители, попадающие в ваши данные формы или поля пароля, не работают) и фактическая разметка очень чистая для чтения. Вы получите что-то вроде этого:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

и после включения CSS и JS он просто работает.