Как создать метку внутри <input> элемента?

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

  •  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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top