Как я могу реализовать подобные переполнению стека водяные знаки в формах?
Я не забываю видеть учебное руководство где-нибудь, которое говорит, как разработать Ваши входные формы более “применимым” способом.
По существу у Вас есть значение заполнителя и когда Вы вводите вход, это скрывает подсказку так сказать.
Теперь, только чтобы быть ясным: Я не хочу, чтобы подсказка (текст значения заполнителя) исчезла на фокусе, а скорее пошла легче, когда я сначала начинаю вводить что-то. Хорошие примеры:
Проверьте формы на Муравьеда. Это точно, как я хочу иметь свои входные формы.
Наше очень собственное Переполнение стека — когда Вы пытаетесь задать вопрос при нажатии в любой входной форме, оно не скрывает текст сразу же. Вы видите свой курсор, а также подсказку. но когда Вы начинаете вводить, это скрывает подсказку. (Я предпочел бы иметь его, переходят к намного более легкому оттенку вместо того, чтобы скрыть все вместе хотя, как вышеупомянутый пример Муравьеда.)
Я не забываю очень ясно читать учебное руководство где-нибудь на interwebz с этим строгим требованием, но штопка, я забыл отмечать его.
Какие-либо предложения/ссылки?
[Обновление: Я недавно нашел Участок плагина jQuery Маркировками, который делает точно, что я хочу. Кроме того, вот ссылка на улучшение того же плагина.]
4 ответа
Вы можете начать с этого:
<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 также устанавливают положение курсора в начало текстового поля, а не оставляют его в конце. Это может быть немного сложно, чтобы заставить его работать в разных браузерах, но вы можете проверить решение, предложенное в следующей статье Джошем Стодолой :
Поле ввода не может одновременно содержать текст по умолчанию и текст, введенный пользователем.Единственный возможный способ добиться именно того, о чем вы просите, - это иметь фоновое изображение в полях ввода с изображением, содержащим текст по умолчанию, который вы хотите отобразить, но я настоятельно рекомендую против этого как два слоя текста будет очень запутать пользователя. Наиболее распространенный способ добиться этого (и то, что сделано на вашем примере сайта 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');
}
});
В HTML5 есть атрибут placeholder, который предназначен именно для этой задачи.
Пока его поддерживает только WebKit (движок рендеринга, используемый в Safari и Google Chrome). Вам понадобится JavaScript fallback, как у Дэниела, для случаев, когда placeholder не поддерживается.
Проверить поддержку placeholder в JavaScript очень просто.
В ответ на сообщение @ Paul я заметил странное поведение заполнителя HTML5 на моем эмуляторе Android. Заполнитель выглядит отлично, пока вы не нажмете на него, и он станет черным с курсором справа от слова. Конечно, если вы наберете, он исчезнет, но это не интуитивно понятно. Поэтому я написал jQuery , чтобы исправить это (где мой значок HTML5 / jQuery?)
$(document).ready(function() {
$('input[placeholder]').focus(function() {
if (!$(this).val()) $(this).val('');
});
});