Фоновый текст в тексте типа ввода

Я думаю, что это простой вопрос, но я не знаю, как искать этот вопрос в google

Мне нужен фоновый текст в поле ввода-текста. Например: Вставьте свое имя. И когда я нажимаю на поле, чтобы вставить мое имя, текст исчезает

Хорошо, спасибо за решение.

<input id="textfield" name="textfield" type="text" placeholder="correct" />

Теперь я получаю второй вопрос. Как я могу изменить цвет заполнителя? Вот моя текстовая область: http://jsfiddle.net/wy8cP/1/

Ответы

Ответ 1

Вот как вы можете получить placeholder с помощью HTML5:

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

EDIT:

Я больше не рекомендую взламывать свои собственные полисы, как я показал ниже. Вы должны использовать Modernizr, чтобы сначала определить, нужен ли polyfill в первую очередь, а затем активировать библиотеку polyfill, которая соответствует вашим потребностям. Существует хороший выбор полимеров заполнителей перечисленных в вики-версии Modernizr.

ОРИГИНАЛ (продолжение):

И вот polyfill для совместимости:

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">

http://jsfiddle.net/q3V4E/1/

Лучшим подходом является запуск этой script на загрузку страницы и размещение ваших заполнителей в атрибуте data-placeholder, поэтому ваша разметка выглядит следующим образом:

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

и ваш js выглядит так:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value = '';
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/

Ответ 2

HTML5 предоставляет атрибут placeholder, который решает эту проблему. См. эту ссылку для получения дополнительной информации (JSFiddle)

<input type="text" placeholder="insert your name" />

Вы всегда можете предоставить резервную копию javascript, отличную от HTML5, например, описанную здесь здесь или в , если вы не используете JQuery.

Ответ 4

Версия jQuery принятого ответа non-html 5:

    var inputs = $("input[type='text']", context);
    $.each(inputs, function (i, obj) {
        $(obj).val($(obj).attr('data-placeholder'));
        $(obj).on('focus', function () {
            if ($(this).val() == $(this).attr('data-placeholder')) {
                $(this).val('');
            }
        });
        $(obj).on('blur', function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr('data-placeholder'));
            }
        });
    });

Ответ 5

Для не-HTML5 я предлагаю приятное решение для javascript, такое как toggleval.js - это позволяет вам не выполнять каждое входное поле inline самостоятельно; это было бы глобально.

http://snipplr.com/view/9077/

script, на который вы могли бы позвонить после этого, будет примерно таким:

    <script type="text/javascript">
    $(document).ready(function() {
        // Input Box ToggleVal
        $("input[type=text]").toggleVal();
        $("input[type=password]").toggleVal();
    });
    </script>

Ответ 6

Изменение цвета заполнителя может быть достигнуто с помощью CSS:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Источник: https://css-tricks.com/almanac/selectors/p/placeholder/