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

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

41 голосов
/ 23 апреля 2009

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

Я знаю, что это очень распространенный трюк, но я не знаю, как это сделать ..

Какое самое простое / лучшее решение?

Ответы [ 13 ]

0 голосов
/ 10 марта 2016

Вам не нужен код Javascript для этого ...
Я думаю, что вы имеете в виду атрибут заполнителя. Вот код: 

<input type="text" placeholder="Your descriptive text goes here...">



Текст по умолчанию будет серого цвета и при щелчке исчезнет!

0 голосов
/ 19 марта 2010

используйте это

стиль: 

<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 () перед отправкой формы.

хорошая работа

0 голосов
/ 23 апреля 2009

Вот простой пример, все, что он делает, это накладывает изображение (с любой формулировкой, которую вы хотите). Я где-то видел эту технику. Я использую библиотеку прототипов, так что вам нужно будет изменить, если использовать что-то еще. При загрузке изображения после 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...