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

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

<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 таким образом, чтобы ваша строка подсказки не повторялась три раза, но я надеюсь, что это поможет вам двигаться в правильном направлении.

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

• Установка положения курсора в текстовом поле или текстовой области с помощью Javascript

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

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

проверить наличие поддержки placeholder в JavaScript просто.

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

$('#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');
  }
});

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

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

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

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

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

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