3 Травень 2014
13 851
Рубрика: уроки

Как заставить работать placeholder в Internet Explorer 9 [без jQuery]

Вы будете смеяться, но некоторые люди еще пользуются Internet Explorer. И не 11-й версией, а 9-й. Если верить статистике, таких олдфагов сейчас насчитывается 2%, а в некоторых случаях ваши сайты нужно разрабатывать с учетом и устаревшего софта.

В IE поддержка атрибута placeholder в текстовых полях появилась в 10-й версии, но мы можем заставить его работать и в девятой, для этого потребуется небольшой хак.

О поддержке placeholder по версиям написано здесь.

Как работает

Во все пустые текстовые поля с атрибутом placeholder js-скрипт подставит этот текст в качестве параметра value. При клике в поле текст будет убираться, цвет набираемого текста поменяется с серого на черный.

Как настроить

Для теста я добавил такие поля:

<input type="text" value="" placeholder="E-mail-1">
<input type="text" value="" placeholder="E-mail-2">
<input type="text" value="Value указан" placeholder="E-mail-3">

Чтобы поля с подсказками не выглядели как заполненная форма, я создал CSS стиль такого текста. Обычно это просто серый текст:

<style type="text/css">
.placeholdr { color: gray }
</style>

Мы обойдемся без jQuery и других фреймворков, код будет простым и понятным. После CSS подключите js. В первой строке мы указываем, что скрипт должен выполняться только для IE младше 10-й версии.

<!--[if IE 9]>
<script type="text/javascript">
(function setPlaceHolders(){
var input = document.getElementsByTagName('input'); // get all text fields
var cls = "placeholdr"; // set name of the class

if (input) { // if fields found
	for (var i=0; i < input.length; i++) { 
		var t = input[i]; 
		var txt = t.getAttribute("placeholder");
		
		if (txt.length > 0) { // if placeholder found
			t.className = t.value.length == 0 ? t.className+" "+cls : t.className; // add class
			t.value = t.value.length > 0 ? t.value : txt; // if no value found
			
			t.onfocus = function() { // on focus
				this.className = this.className.replace(cls);
				this.value = this.value == this.getAttribute("placeholder") ? "" : this.value;
			}
		
			t.onblur = function() { // on focus out 
				if (this.value.length == 0) {
					this.value = this.getAttribute("placeholder");
					this.className = this.className+" "+cls; // add class
				}
			}
		}  
	}
}
})();
</script>
<![endif]-->

Демо и скачать

Тепер я хочу бачити коментарі 10