Эмуляция функциональности "плейсхолдеров" - адаптация кода под старые браузеры

zhibirc · Регистрация: 18.02.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, друзья!

Нужна ваша помощь. Написал плагин, эмулирующий функциональность placeholders HTML 5. Не для того, конечно же, чтобы переопределять нативные, а для имплементации данной функциональности в старые браузеры и прежде всего, конечно, Internet Explorer (интересует в том числе поддержка в IE 8). При написании постарался учесть, насколько мог, особенности IE, однако проверка показала, что в IE 8 плагин фактически неработоспособен, при этом в консоли чисто и в других бразурах (современных версий) все работает.

Просьба помочь кто-чем может (советами, кодом, конкретными отсылами в интернет) в адаптации моего кода для старых браузеров (IE 8 в том числе). Спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Placeholder emulation</title>
    <style>
      * { margin: 0; padding: 0; }
      label { font: 18px bold Helvetica, Arial, sans-serif; }
      input { color: #aaa; width: 200px; height: 50px; padding: 10px; font-size: 16px; border-radius: 5px; }
    </style>
<script src="placeholder.js"></script>
</head>
<body>
<!-- Markup requirements for the "plugin" are very simple.
Add "placeholder" with the optional values to inputs in which you want to see the placeholders. That's all, enjoy! -->
<label for="login">Login:</label>
<input id="login" placeholder="Enter your login">
<label for="password">Password:</label>
<input id="password" placeholder="Enter your password">
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
'use strict';
        window.onload = function() {
            if (!supportsInputPlaceholder()) addPlaceholder();
        };
 
        /* Verify if "Placeholder" supported in browser */
        function supportsInputPlaceholder() {
            var i = document.createElement('input');
            return 'placeholder' in i;
        }
 
        /* Adding placeholder functionality to the input text fields if it isn't support in browser */
        function addPlaceholder() {
            var builder = {
                    addHandler: function(elms, event_and_func) {
                    for (var i = elms.length - 1; i > -1; i--) {
                        for (var j = event_and_func.length - 1; j > -1; j--) {
                            if (window.addEventListener) {
                                elms[i].addEventListener(event_and_func[j][0], event_and_func[j][1], false);
                            } else if (window.attachEvent) {
                                elms[i].attachEvent('on' + event_and_func[j][0], event_and_func[j][1]);
                            }
                        }
                    }
                }
            };
 
            var inputs = document.getElementsByTagName('input');
 
            for (var i = inputs.length - 1, elms = []; i > -1; i--) {
                if (!inputs[i].hasAttribute('placeholder')) continue;
                var el = inputs[i];
                el.value = el.getAttribute('placeholder');
                elms.push(el);
            }
 
            builder.addHandler(elms, [
                        ['click', focused],
                        ['blur', blured],
                        ['keydown', keyEvents],
                        ['paste', pasteEvent]
                    ]);
        }
 
 
        /* Actions if input field gets focus */
        function focused() {
            if (this.value == this.getAttribute('placeholder')) setCaretToPos(this, 0);
        }
 
        /* Actions if input field loses focus (blur) */
        function blured() {
            if (!this.value) this.value = showPlVal(this);
        }
 
        /* Actions if some text typing in input field */
        function keyEvents(event) {
            event = event || window.event;
            if (this.value == this.getAttribute('placeholder') && event.keyCode == 8 || !String.fromCharCode(event.keyCode).length) {
                return false;
            } else if (!this.value) {
                this.value = showPlVal(this);
                setCaretToPos(this, 0);
            } else {
                if (this.value ==  this.getAttribute('placeholder')) this.value = String.fromCharCode(event.keyCode);
                this.style.color = 'black';
            }
        }
 
        /* Actions if some text paste in input field */
        function pasteEvent() {
            if (this.value == this.getAttribute('placeholder')) {
                this.value = '';
                this.style.color = 'black';
            }
        }
 
        /* Move caret to the specified position */
        function setSelectionRange(input, selectionStart, selectionEnd) {
            if (input.setSelectionRange) {
                //input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            } else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
        }
 
        function setCaretToPos (input, pos) {
            setSelectionRange(input, pos, pos);
        }
 
        /* Return styled placeholder for particular item */
        function showPlVal(_this) {
            var pl = _this.getAttribute('placeholder');
            _this.style.color = '#aaa';
            return pl;
        }

@MVS76 · 08.05.2014, 00:45

Вроде вот "https://github.com/claustrofob/Default-Text/blob/master/jquery.input-placeholder.css"

zhibirc · 10.05.2014, 21:01 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
'use strict';
        window.onload = function() {
            if (!supportsInputPlaceholder()) addPlaceholder();
        };
 
        /* Verify if "Placeholder" supported in browser */
        function supportsInputPlaceholder() {
            var i = document.createElement('input');
            return 'placeholder' in i;
        }
 
        /* Adding placeholder functionality to the input text fields if it isn't support in browser */
        function addPlaceholder() {
            var builder = {
                    addHandler: function(elms, event_and_func) {
                        var _el;
                        for (var i = elms.length - 1; i > -1; i--) {
                            for (var j = event_and_func.length - 1; j > -1; j--) {
                                _el = elms[i];
                                if (_el.addEventListener) {
                                    _el.addEventListener(event_and_func[j][0], event_and_func[j][1], false);
                                } else if (_el.attachEvent) {
                                    _el.attachEvent('on' + event_and_func[j][0], function() { event_and_func[j][1].call(_el); });
                                }
                            }
                        }
                    }
            };
 
            var inputs = document.getElementsByTagName('input');
 
            for (var i = inputs.length - 1, elms = []; i > -1; i--) {
                if (!inputs[i].hasAttribute('placeholder')) continue;
                var el = inputs[i];
                el.value = el.getAttribute('placeholder');
                elms.push(el);
            }
 
            builder.addHandler(elms, [
                ['click', focused],
                ['blur', blured],
                ['keydown', keyEvents],
                ['paste', pasteEvent]
            ]);
        }
 
 
        /* Actions if input field gets focus */
        function focused() {
            if (this.value == this.getAttribute('placeholder')) setCaretToPos(this, 0);
        }
 
        /* Actions if input field loses focus (blur) */
        function blured() {
            if (!this.value) this.value = showPlVal(this);
        }
 
        /* Actions if some text typing in input field */
        function keyEvents(event) {
            event = event || window.event;
            if (this.value == this.getAttribute('placeholder') && event.keyCode == 8 || !String.fromCharCode(event.keyCode).length) {
                return false;
            } else if (!this.value) {
                this.value = showPlVal(this);
                setCaretToPos(this, 0);
            } else {
                if (this.value ==  this.getAttribute('placeholder')) this.value = String.fromCharCode(event.keyCode);
                this.style.color = 'black';
            }
        }
 
        /* Actions if some text paste in input field */
        function pasteEvent() {
            if (this.value == this.getAttribute('placeholder')) {
                this.value = '';
                this.style.color = 'black';
            }
        }
 
        /* Move caret to the specified position */
        function setSelectionRange(input, selectionStart, selectionEnd) {
            if (input.setSelectionRange) {
                //input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            } else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
        }
 
        function setCaretToPos (input, pos) {
            setSelectionRange(input, pos, pos);
        }
 
        /* Return styled placeholder for particular item */
        function showPlVal(_this) {
            var pl = _this.getAttribute('placeholder');
            _this.style.color = '#aaa';
            return pl;
        }

Исправлена ошибка с некорректной передачей this в обработчик, навешиваемый attachEvent. Код не совсем корректно работает в IE 9 (но в целом работает), также не поддерживающий placeholders, но напрочь отказывается работать в IE 8. Если будут какие-то идеи, буду очень благодарен. Интересует допилить код на чистом JS.

@MVS76 · 11.05.2014, 04:04

А почему не использовать простой способ, вроде работает везде стабильно, немного не тот эффект, но просто и понятно

HTML5
1
<input class="cme_txt" type="text" maxlength="25" value="Ваше имя" onfocus="if(this.value=='Ваше имя') this.value=''; this.style.color='#222';" onblur="if(this.value=='') { this.value='Ваше имя'; this.style.color='#FF2020'; } else { this.style.color='#222'; }" id="cname" style="color: rgb(255, 32, 32);" />

zhibirc · 11.05.2014, 12:12 **[ТС]**

MVS76, спасибо за то, что указали вектор поиска. Дело в том, что реализация поспешила раньше детальной постановки задачи. А постановка такая, как я сейчас это вижу, должна была включать ожидаемое в соответствие со спецификацией поведедение placeholder. Я же ориентировался изначально, и это видно из кода, на поведение placeholder в последних версиях Chrome и Firefox (placeholder находится в поле ввода "до последнего", исчезая только после начала ввода текста). В спецификации же сказано:

the short hint given in the placeholder attribute is shown before the user enters a value;

То есть не исключает исчезновение его с получением полем фокуса и далее:

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string or the control is not focused (or both), e.g. by displaying it inside a blank unfocused control and hiding it otherwise.

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

@kalabuni · 12.05.2014, 00:15

ссылки выше не смотрел
кроссбраузерно вашу задачу я решал бы так:
-- создание абсолютно спозиционированного тега <SPAN> с текстом плейсхолдера
-- определение абсолютных координат и размеров клиентской области поля ввода
-- помещение созданного SPAN'а в середину клиентской области поля ввода по высоте и с отступом слева в 1ex
-- назначение SPAN'у на клик функции, перемещающей курсор в поле ввода
-- назначение полю ввода функции отслеживания изменения value (здесь для старых не-MSIE браузеров придётся работать через таймер)
-- при длине непробельного value, отличной от нуля, тег SPAN становится невидимым

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	08.05.2014, 00:45
	Вроде вот "https://github.com/claustrofob/Default-Text/blob/master/jquery.input-placeholder.css" 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	12.05.2014, 00:15
	Сообщение было отмечено zhibirc как решение Решение ссылки выше не смотрел кроссбраузерно вашу задачу я решал бы так: -- создание абсолютно спозиционированного тега <SPAN> с текстом плейсхолдера -- определение абсолютных координат и размеров клиентской области поля ввода -- помещение созданного SPAN'а в середину клиентской области поля ввода по высоте и с отступом слева в 1ex -- назначение SPAN'у на клик функции, перемещающей курсор в поле ввода -- назначение полю ввода функции отслеживания изменения value (здесь для старых не-MSIE браузеров придётся работать через таймер) -- при длине непробельного value, отличной от нуля, тег SPAN становится невидимым 1

Эмуляция функциональности "плейсхолдеров" - адаптация кода под старые браузеры

Решение