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

StackOverflow https://stackoverflow.com/questions/2260367

Вопрос

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

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

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

  • Ознакомьтесь с формами на Трубкозуб.Это именно то, какими я хотел бы видеть свои формы ввода.

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

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

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

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

Это было полезно?

Решение

Возможно, вы захотите начать с этого:

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

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

Другие советы

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), вы можете использовать тот же метод с нажатие клавиши событие:

$('#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 он просто работает.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top