|
99 | 99 | Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`:
|
100 | 100 |
|
101 | 101 | ```html
|
102 |
| -<!--+ autorun --> |
| 102 | +<!--+ autorun height=100 --> |
103 | 103 | <style>
|
104 | 104 | *!*input:focus*/!* {
|
105 | 105 | background: #FA6;
|
|
140 | 140 | Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`:
|
141 | 141 |
|
142 | 142 | ```html
|
143 |
| -<!--+ autorun --> |
| 143 | +<!--+ autorun height=80 --> |
144 | 144 | <input type="text" placeholder="E-mail">
|
145 | 145 | ```
|
146 | 146 |
|
147 | 147 | В некоторых браузерах этот текст можно стилизовать:
|
148 | 148 |
|
149 | 149 | ```html
|
150 |
| -<!--+ autorun --> |
| 150 | +<!--+ autorun height=80 --> |
151 | 151 | <style>
|
152 | 152 | .my*!*::-webkit-input-placeholder*/!* {
|
153 | 153 | color: red;
|
|
214 | 214 | Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась:
|
215 | 215 |
|
216 | 216 | ```html
|
217 |
| -<!--+ autorun height=auto --> |
| 217 | +<!--+ autorun height=100 --> |
| 218 | +<!-- при фокусировке на форме ставим ей класс --> |
218 | 219 | <form *!*onfocus="this.className='focused'"*/!*>
|
219 | 220 | <input type="text" name="name" value="Ваше имя">
|
220 | 221 | <input type="text" name="surname" value="Ваша фамилия">
|
|
223 | 224 | <style> .focused { outline: 1px solid red; } </style>
|
224 | 225 | ```
|
225 | 226 |
|
226 |
| -В примере выше стоит обработчик `onfocus` на форме, но он не работает, т.к. при фокусировке на любом `INPUT` событие `focus` срабатывает только на этом элементе и не всплывает наверх. |
| 227 | +Пример выше не работает, т.к. при фокусировке на любом `<input>` событие `focus` срабатывает только на этом элементе и не всплывает наверх. Так что обработчик `onfocus` на форме никогда не сработает. |
227 | 228 |
|
228 |
| -Что делать? Неужели мы должны присваивать обработчик каждому полю? |
| 229 | +Что делать? Неужели мы должны присваивать обработчик каждому полю `<input>`? |
229 | 230 |
|
230 | 231 | **Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.**
|
231 | 232 |
|
232 | 233 | Вот так сработает:
|
233 | 234 |
|
234 | 235 | ```html
|
235 |
| -<!--+ autorun height=auto --> |
| 236 | +<!--+ autorun height=100 --> |
236 | 237 | <form id="form">
|
237 | 238 | <input type="text" name="name" value="Ваше имя">
|
238 | 239 | <input type="text" name="surname" value="Ваша фамилия">
|
|
264 | 265 |
|
265 | 266 | У них две особенности:
|
266 | 267 | <ul>
|
267 |
| -<li>Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.</li> |
268 |
| -<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li> |
| 268 | +<li>Не поддерживаются Firefox (хотя поддерживаются даже старейшими IE), см. [](https://bugzilla.mozilla.org/show_bug.cgi?id=687787).</li> |
| 269 | +<li>Должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li> |
269 | 270 | </ul>
|
270 | 271 |
|
271 |
| -Для кросс-браузерной поддержки фокуса с делегированием можно использовать сочетать эти события с фазой перехвата. |
| 272 | +Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать `focus` на стадии перехвата, ну а `focusin/focusout` -- в IE8-, где стадии перехвата нет. |
272 | 273 |
|
273 | 274 | Подсветка формы в примере ниже работает во всех браузерах.
|
274 | 275 |
|
|
296 | 297 | var form = document.forms.form;
|
297 | 298 |
|
298 | 299 | if (form.addEventListener) {
|
| 300 | + // focus/blur на стадии перехвата срабатывают во всех браузерах |
| 301 | + // поэтому используем их |
299 | 302 | form.addEventListener('focus', onFormFocus, true);
|
300 | 303 | form.addEventListener('blur', onFormBlur, true);
|
301 |
| - } else { // IE8- |
| 304 | + } else { |
| 305 | + // ветка для IE8-, где нет стадии перехвата, но есть focusin/focusout |
302 | 306 | form.onfocusin = onFormFocus;
|
303 | 307 | form.onfocusout = onFormBlur;
|
304 | 308 | }
|
|
319 | 323 | </li>
|
320 | 324 | </ul>
|
321 | 325 |
|
322 |
| -Текущий элемент, на котором фокус, доступен как `document.activeElement`. |
323 |
| - |
324 |
| - |
325 |
| - |
326 |
| - |
327 |
| - |
328 |
| - |
| 326 | +[smart header="Текущий элемент: `document.activeElement`"] |
| 327 | +Кстати, текущий элемент, на котором фокус, доступен как `document.activeElement`. |
| 328 | +[/smart] |
329 | 329 |
|
330 | 330 |
|
331 | 331 |
|
0 commit comments