Я хотел бы вставить описательный текст внутри элемента ввода, который исчезает, когда пользователь нажимает на него.
Я знаю, что это очень распространенный трюк, но я не знаю, как это сделать.
Какое самое простое/лучшее решение?
Как создать ярлык внутри элемента <input>?
Ответ 1
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Лучшим примером может служить кнопка поиска SO! То, откуда я получил этот код. Просмотр источника страницы является ценным инструментом.
Ответ 2
Если вы используете HTML5, вы можете использовать атрибут placeholder.
<input type="text" name="user" placeholder="Username">
Ответ 3
На мой взгляд, лучшее решение не включает ни изображения, ни использование значения ввода по умолчанию. Скорее, это похоже на решение Дэвида Дорварда.
Он легко реализуется и ухудшается для читателей экрана и пользователей без javascript.
Взгляните на два примера: http://attardi.org/labels/
Обычно я использую второй метод (метки2) в моих формах.
Ответ 4
Общий подход - использовать значение по умолчанию в качестве метки, а затем удалить его, когда поле получает фокус.
Мне действительно не нравится этот подход, поскольку он имеет доступность и последствия использования.
Вместо этого я начну с использования стандартного элемента рядом с полем.
Затем, если JavaScript активен, установите класс в элементе-предке, который вызывает применение некоторых новых стилей, которые:
- Относительно позиционировать div, содержащий вход и метку
- Абсолютно поместите метку
- Абсолютно позиционируйте ввод поверх метки
- Удалите границы ввода и установите его цвет фона прозрачным.
Затем, а также всякий раз, когда вход теряет фокус, я проверяю, имеет ли значение входное значение. Если это так, убедитесь, что элемент предка имеет класс (например, "скрыть метку" ), в противном случае убедитесь, что он не имеет этого класса.
Всякий раз, когда вход получает фокус, установите этот класс.
Таблица стилей будет использовать это имя класса в селекторе, чтобы скрыть метку (обычно с помощью текстового отступа: -9999px).
Этот подход обеспечивает достойный опыт для всех пользователей, в том числе с отключенными JS и теми, кто использует программы чтения с экрана.
Ответ 5
Я собрал решения, предложенные @Cory Walker с расширениями от @Rafael и одна форма @Tex ведьма была для меня немного сложной и придумал решение, которое, надеюсь,
защита от ошибок с отключенным javascript и CSS.
Он обрабатывает фоновый цвет поля формы, чтобы показать/скрыть метку.
<head>
<style type="text/css">
<!--
input {position:relative;background:transparent;}
-->
</style>
<script>
function labelPosition() {
document.getElementById("name").style.position="absolute";
// label is moved behind the textfield using the script,
// so it doesnt apply when javascript disabled
}
</script>
</head>
<body onload="labelPosition()">
<form>
<label id="name">Your name</label>
<input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>
</body>
Просмотрите script в действии: http://mattr.co.uk/work/form_label.html
Ответ 6
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Добавьте событие onblur.
Ответ 7
Когда вы начнете вводить текст, он исчезнет. Если пустая строка появится снова.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
Простейший способ...
Ответ 8
Пожалуйста, используйте PlaceHolder.JS его работы во всех браузерах и очень легко для не совместимых с html5 браузеров http://jamesallardice.github.io/Placeholders.js/
Ответ 9
Один намек на компоновщик свойства HTML и текстовую область тега, убедитесь, что между <textarea> и </textarea> нет пробела, иначе placeholder не работает, например:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
Это не сработает, потому что есть пробел между...
Ответ 10
используйте этот
стиль:
<style type="text/css">
.defaultLabel_on { color:#0F0; }
.defaultLabel_off { color:#CCC; }
</style>
HTML:
JavaScript:
function defaultLabelClean() {
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
inputs[i].value = '';
}
}
}
function defaultLabelAttachEvents(element, label) {
element.setAttribute("innerLabel", label);
element.onfocus = function(e) {
if (this.value==label) {
this.className = 'defaultLabel_on';
this.value = '';
}
}
element.onblur = function(e) {
if (this.value=='') {
this.className = 'defaultLabel_off';
this.value = element.getAttribute("innerLabel");
}
}
if (element.value=='') {
element.className = 'defaultLabel_off';
element.value = element.getAttribute("innerLabel");
}
}
defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");
Не забудьте вызвать функцию defaultLabelClean() перед отправкой.
хорошая работа
Ответ 11
Вам не нужен код Javascript для этого...
Я думаю, вы имеете в виду атрибут placeholder. Вот код:
<input type="text" placeholder="Your descriptive text goes here...">
Текст по умолчанию будет серо-иш, и при нажатии он исчезнет!
Ответ 12
Вот простой пример: все, что он делает, это наложение изображения (с любой формулировкой, которую вы хотите). Я видел эту технику где-то. Я использую библиотеку прототипов, поэтому вам нужно будет изменить, если используете что-то еще. С загрузкой изображения после window.load он изящно выходит из строя, если javascript отключен.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
<meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" >
input.searcher
{
background-image: url(/images/search_back.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: center;
}
</style>
<script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
<input type="text" id="q" name="q" value="" />
<script type="text/javascript" language="JavaScript" >
// <![CDATA[
function f(e){
$('q').removeClassName('searcher');
}
function b(e){
if ( $F('q') == '' )
{
$('q').addClassName('searcher');
}
}
Event.observe( 'q', 'focus', f);
Event.observe( 'q', 'blur', b);
Event.observe( window, 'load', b);
// ]]>
</script>
</body>
</html>