Skip to content

Commit 229ddbb

Browse files
committed
fixes
1 parent beda331 commit 229ddbb

File tree

3 files changed

+20
-20
lines changed

3 files changed

+20
-20
lines changed

2-ui/1-document/13-document-write/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ document.write('<script src="' + url + '"><\/script>');
113113
Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку `</script>`.
114114
[/smart]
115115

116-
Сервер, получив запрос с такими параметрами, обрабатывает его и, исходя учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер.
116+
Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер.
117117

118118
**Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.**
119119

2-ui/1-document/15-metrics/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
Несмотря на то, что эти свойства нужны реже всего, они -- самые "внешние", поэтому начнём с них.
8080

81-
**В `offsetParent` находится ссылка родительский элемент в смысле отображения на странице.**
81+
**В `offsetParent` находится ссылка на родительский элемент в смысле отображения на странице.**
8282

8383
Уточним, что имеется в виду.
8484

2-ui/4-forms-controls/2-focus-blur/article.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`:
100100

101101
```html
102-
<!--+ autorun -->
102+
<!--+ autorun height=100 -->
103103
<style>
104104
*!*input:focus*/!* {
105105
background: #FA6;
@@ -140,14 +140,14 @@
140140
Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`:
141141

142142
```html
143-
<!--+ autorun -->
143+
<!--+ autorun height=80 -->
144144
<input type="text" placeholder="E-mail">
145145
```
146146

147147
В некоторых браузерах этот текст можно стилизовать:
148148

149149
```html
150-
<!--+ autorun -->
150+
<!--+ autorun height=80 -->
151151
<style>
152152
.my*!*::-webkit-input-placeholder*/!* {
153153
color: red;
@@ -214,7 +214,8 @@
214214
Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась:
215215

216216
```html
217-
<!--+ autorun height=auto -->
217+
<!--+ autorun height=100 -->
218+
<!-- при фокусировке на форме ставим ей класс -->
218219
<form *!*onfocus="this.className='focused'"*/!*>
219220
<input type="text" name="name" value="Ваше имя">
220221
<input type="text" name="surname" value="Ваша фамилия">
@@ -223,16 +224,16 @@
223224
<style> .focused { outline: 1px solid red; } </style>
224225
```
225226

226-
В примере выше стоит обработчик `onfocus` на форме, но он не работает, т.к. при фокусировке на любом `INPUT` событие `focus` срабатывает только на этом элементе и не всплывает наверх.
227+
Пример выше не работает, т.к. при фокусировке на любом `<input>` событие `focus` срабатывает только на этом элементе и не всплывает наверх. Так что обработчик `onfocus` на форме никогда не сработает.
227228

228-
Что делать? Неужели мы должны присваивать обработчик каждому полю?
229+
Что делать? Неужели мы должны присваивать обработчик каждому полю `<input>`?
229230

230231
**Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.**
231232

232233
Вот так сработает:
233234

234235
```html
235-
<!--+ autorun height=auto -->
236+
<!--+ autorun height=100 -->
236237
<form id="form">
237238
<input type="text" name="name" value="Ваше имя">
238239
<input type="text" name="surname" value="Ваша фамилия">
@@ -264,11 +265,11 @@
264265

265266
У них две особенности:
266267
<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>
269270
</ul>
270271

271-
Для кросс-браузерной поддержки фокуса с делегированием можно использовать сочетать эти события с фазой перехвата.
272+
Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать `focus` на стадии перехвата, ну а `focusin/focusout` -- в IE8-, где стадии перехвата нет.
272273

273274
Подсветка формы в примере ниже работает во всех браузерах.
274275

@@ -296,9 +297,12 @@
296297
var form = document.forms.form;
297298
298299
if (form.addEventListener) {
300+
// focus/blur на стадии перехвата срабатывают во всех браузерах
301+
// поэтому используем их
299302
form.addEventListener('focus', onFormFocus, true);
300303
form.addEventListener('blur', onFormBlur, true);
301-
} else { // IE8-
304+
} else {
305+
// ветка для IE8-, где нет стадии перехвата, но есть focusin/focusout
302306
form.onfocusin = onFormFocus;
303307
form.onfocusout = onFormBlur;
304308
}
@@ -319,13 +323,9 @@
319323
</li>
320324
</ul>
321325

322-
Текущий элемент, на котором фокус, доступен как `document.activeElement`.
323-
324-
325-
326-
327-
328-
326+
[smart header="Текущий элемент: `document.activeElement`"]
327+
Кстати, текущий элемент, на котором фокус, доступен как `document.activeElement`.
328+
[/smart]
329329

330330

331331

0 commit comments

Comments
 (0)