Как создать метку внутри <input> элемента?
-
13-09-2019 - |
Вопрос
Я хотел бы вставить описательный текст внутри элемента ввода, который исчезает, когда пользователь нажимает на него.
Я знаю, что это очень распространенный трюк, но я не знаю, как это сделать..
Какое самое простое / лучшее решение?
Решение
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Лучшим примером была бы кнопка поиска SO!Вот откуда я взял этот код.Просмотр исходного кода страницы - ценный инструмент.
Другие советы
Если вы используете HTML5, вы можете использовать placeholder
атрибут.
<input type="text" name="user" placeholder="Username">
На мой взгляд, лучшее решение не включает в себя ни изображения, ни использование входного значения по умолчанию.Скорее, это выглядит примерно как решение Дэвида Дорварда.
Это легко реализовать, и оно отлично подходит для программ чтения с экрана и пользователей без javascript.
Взгляните на два приведенных здесь примера:http://attardi.org/labels/
Обычно я использую второй метод (labels2) в своих формах.
Общепринятый подход заключается в использовании значения по умолчанию в качестве метки, а затем удалении его, когда поле попадает в фокус.
Мне действительно не нравится этот подход, поскольку он имеет последствия для доступности и удобства использования.
Вместо этого я бы начал с использования стандартного элемента рядом с полем.
Затем, если JavaScript активен, установите класс для элемента-предка, который вызывает применение некоторых новых стилей, которые:
- Относительно расположите div, содержащий входные данные и метку
- Абсолютно расположите этикетку
- Полностью расположите входные данные поверх этикетки
- Удалите границы входных данных и установите для их фона цвет на прозрачный
Затем, а также всякий раз, когда входные данные теряют фокус, я проверяю, имеет ли входные данные значение.Если это так, убедитесь, что элемент-предок имеет класс (например"hide-label"), в противном случае убедитесь, что у него нет этого класса.
Всякий раз, когда входные данные попадают в фокус, установите этот класс.
Таблица стилей будет использовать это имя класса в селекторе, чтобы скрыть метку (используя текстовый отступ:-9999px;обычно).
Такой подход обеспечивает достойный интерфейс для всех пользователей, включая тех, у кого отключен JS, и тех, кто использует программы чтения с экрана.
Я собрал решения, предложенные @Cory Walker, с расширениями от @Rafael и одна форма @Tex witch была немного сложной для меня и придумал решение, которое, надеюсь,
защита от ошибок при отключенных 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>
Посмотреть сценарий в действии: http://mattr.co.uk/work/form_label.html
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Добавьте также событие onblur.
Когда вы начнете вводить текст, оно исчезнет.Если оно пустое, оно появится снова.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>
Самый простой способ...
Пожалуйста, используйте заполнитель.JS its работает во всех браузерах и очень удобен для браузеров, не совместимых с html5 http://jamesallardice.github.io/Placeholders.js/
Один намек о свойстве HTML плейсхолдер и метка текстовое поле, пожалуйста, убедитесь, что нет никакого пробела между <textarea>
и </textarea>
, в противном случае плейсхолдер не работает, например:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
Это не сработает, потому что между ними есть пробел...
используй это
Стиль:
<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() перед отправкой формы.
хорошая работа
Для этого вам не нужен код Javascript...
Я думаю, вы имеете в виду атрибут placeholder.Вот этот код:
<input type="text" placeholder="Your descriptive text goes here...">
Текст по умолчанию будет серым, и при нажатии на него он исчезнет!
Я думаю, что было бы неплохо сохранить Метку и не использовать заполнитель, как упоминалось выше.Это хорошо для UX, как объясняется здесь:https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
Вот пример с Меткой внутри полей ввода:codepen.io/jdax/pen/mEBJNa
Вот простой пример, все, что он делает, это накладывает изображение (с любой формулировкой, которую вы хотите).Я где-то видел эту технику.Я использую библиотеку prototype, поэтому вам нужно будет внести изменения, если вы используете что-то другое.С загрузкой изображения после окна.загрузка завершается с ошибкой, если 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>