Фоновый текст в тексте типа ввода
Я думаю, что это простой вопрос, но я не знаю, как искать этот вопрос в 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.
Ответ 3
Я думаю, что вы ищете заполнитель поля формы HTML5...:)
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
Ответ 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/