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

Я могу сделать свою метку внутри элемента ввода (мой «исчезающий текст»):

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name"
 onfocus="if(this.value==this.defaultValue)this.value=''" 
 onblur="if(this.value=='')this.value=this.defaultValue" />

Затем настройте его так, чтобы мой исчезающий текст был блеклым (# 333). И стилизуйте его так, чтобы, когда я начинаю вводить значение в поле, текст был черным (# 000).

CSS

input[type=text] {
    color: #333;
}
input[type=text]:focus {
    color: #000;
}

Все работает нормально, пока вы не перейдете к следующему полю ввода. Затем поле, в которое вы только что ввели значение, снова изменится на цвет #333. Я понимаю, почему это происходит, но не могу понять, как сохранить значение черного цвета #000, если в поле ввода было введено значение.

Заранее спасибо за помощь и обучение!


javascript html css placeholder textinput
person BitBug    schedule 28.03.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

HTML5

В HTML5 добавлен удобный атрибут для тега <input> под названием placeholder, который обеспечивает встроенную поддержку этой функции.

jsFiddle

<input type="text" placeholder="Search..." />

Служба поддержки

Все последние браузеры поддерживают это, однако IE9 и более ранние версии не поддерживают.

<label>

Обратите внимание, что атрибут placeholder не является заменой для тега <label>, который должен иметь каждый вход, убедитесь, что вы включили метку для <input>, даже если она не видна пользователю.

<label for="search">Search</label>
<input id="search" placeholder="Search..." />

Приведенный выше <label> можно скрыть, чтобы он по-прежнему был доступен для вспомогательных технологий, например:

label[for=search] {
    position:absolute;
    left:-9999px;
    top:-9999px;
}

Кроссбраузерное решение

Вот потенциальное кросс-браузерное решение. Я переместил код из тега в теги скрипта, а затем использовал класс placeholder, чтобы указать, когда следует затухать текст.

jsFiddle

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name" 
    class="placeholder" id="my-input" />

CSS

input[type=text].placeholder {
    color: #999;
}

JS

<script type="text/javascript">
var input = document.getElementById('my-input');

input.onfocus = function () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
};
input.onblur = function() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
};
</script>

Применить ко всем input[type=text]

Мы можем расширить приведенное выше решение, чтобы применить его ко всем input[type=text], используя document.getElementsByTagName(), перебирая их и проверяя атрибут type с помощью element.getAttribute().

jsFiddle

var input = document.getElementsByTagName('input');

for (var i = 0; i < input.length; i++) {
    if (input[i].getAttribute('type') === 'text') {
        input[i].onfocus = inputOnfocus;
        input[i].onblur = inputOnblur;
    }
}
function inputOnfocus () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
}
function inputOnblur() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
}
person Daniel Imms    schedule 28.03.2013
comment
Разве это не только HTML5? Нужно что-то более обратно совместимое - person BitBug; 28.03.2013
comment
Обратите внимание, что placeholder не заменяет label. - person steveax; 28.03.2013
comment
Почти готово :-) JS, похоже, ссылается только на определенный идентификатор ввода. Нужно, чтобы это применялось ко всем элементам input[type=text], а не только к одному, на который ссылается идентификатор. Спасибо. - person BitBug; 29.03.2013
comment
Обновлено для применения к input[type=text]. - person Daniel Imms; 29.03.2013

arrow_upward
1
arrow_downward

Кажется, это работает с xbrowser, используя комбинацию jQuery и библиотеки Modernizer.

Требует наличия на сайте библиотек jQuery и Modernizer и соответствующих ссылок.

HTML

<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();
$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

}
</script>
</head>

<body>
<form>
<input name="firstName" type="text" maxlength="40" placeholder="Enter your first name">
</form>

CSS

input[type=text] {
color: #000;
}

input[type=text].placeholder {
color: #666;
}

ИСТОЧНИК: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

person BitBug    schedule 28.03.2013