Как я могу реализовать Stack Overflow-подобные водяные знаки в формах? - PullRequest
Новая
       20

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

12 голосов
/ 14 февраля 2010

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

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

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

  • Проверьте формы на Aardvark . Это именно то, как я хочу, чтобы мои формы ввода.

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

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

Есть предложения / ссылки?

[Обновление: я недавно нашел плагин jQuery Ярлыки в поле , который делает именно то, что я хочу. Также, вот ссылка на улучшение этого же плагина. ]

Ответы [ 5 ]

15 голосов
/ 14 февраля 2010

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

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

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

14 голосов
/ 14 февраля 2010

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

<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 также устанавливают позицию курсора в начало текстового поля, а не оставляют его в конце. Это может быть немного сложно, чтобы заставить его работать кросс-браузер, но вы можете проверить решение, предложенное в следующей статье Джош Стодола :

1 голос
/ 18 июля 2010

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

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});
1 голос
/ 14 февраля 2010

Поле ввода не может содержать текст по умолчанию и текст, введенный пользователем одновременно. Единственный возможный способ добиться именно того, что вы просите, - это иметь фоновое изображение в полях ввода с изображением, содержащим текст по умолчанию, который вы хотите отобразить, но я настоятельно рекомендую против этого как два слоя текста будет очень запутанным для пользователя. Наиболее распространенный способ добиться этого (и то, что делается на вашем примере на сайте 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');
  }
});
0 голосов
/ 15 ноября 2011

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

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

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

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

...