jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

fixes

Browse source
This commit is contained in:
Ilya Kantor 2015-05-04 23:06:27 +03:00
parent beda33163b
commit 229ddbb651
3 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -113,7 +113,7 @@ document.write('<script src="' + url + '"><\/script>');
Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку `</script>`. Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку `</script>`.
[/smart] [/smart]
Сервер, получив запрос с такими параметрами, обрабатывает его и, исходя учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер. Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер.
**Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.** **Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.**

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

@ -78,7 +78,7 @@
Несмотря на то, что эти свойства нужны реже всего, они -- самые "внешние", поэтому начнём с них. Несмотря на то, что эти свойства нужны реже всего, они -- самые "внешние", поэтому начнём с них.
**В `offsetParent` находится ссылка родительский элемент в смысле отображения на странице.** **В `offsetParent` находится ссылка на родительский элемент в смысле отображения на странице.**
Уточним, что имеется в виду. Уточним, что имеется в виду.

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

@ -99,7 +99,7 @@
Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`: Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`:
```html ```html
<!--+ autorun --> <!--+ autorun height=100 -->
<style> <style>
*!*input:focus*/!* { *!*input:focus*/!* {
background: #FA6; background: #FA6;
@ -140,14 +140,14 @@
Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`: Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`:
```html ```html
<!--+ autorun --> <!--+ autorun height=80 -->
<input type="text" placeholder="E-mail"> <input type="text" placeholder="E-mail">
``` ```
В некоторых браузерах этот текст можно стилизовать: В некоторых браузерах этот текст можно стилизовать:
```html ```html
<!--+ autorun --> <!--+ autorun height=80 -->
<style> <style>
.my*!*::-webkit-input-placeholder*/!* { .my*!*::-webkit-input-placeholder*/!* {
color: red; color: red;
@ -214,7 +214,8 @@
Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась: Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась:
```html ```html
<!--+ autorun height=auto --> <!--+ autorun height=100 -->
<!-- при фокусировке на форме ставим ей класс -->
<form *!*onfocus="this.className='focused'"*/!*> <form *!*onfocus="this.className='focused'"*/!*>
<input type="text" name="name" value="Ваше имя"> <input type="text" name="name" value="Ваше имя">
<input type="text" name="surname" value="Ваша фамилия"> <input type="text" name="surname" value="Ваша фамилия">
@ -223,16 +224,16 @@
<style> .focused { outline: 1px solid red; } </style> <style> .focused { outline: 1px solid red; } </style>
``` ```
В примере выше стоит обработчик `onfocus` на форме, но он не работает, т.к. при фокусировке на любом `INPUT` событие `focus` срабатывает только на этом элементе и не всплывает наверх. Пример выше не работает, т.к. при фокусировке на любом `<input>` событие `focus` срабатывает только на этом элементе и не всплывает наверх. Так что обработчик `onfocus` на форме никогда не сработает.
Что делать? Неужели мы должны присваивать обработчик каждому полю? Что делать? Неужели мы должны присваивать обработчик каждому полю `<input>`?
**Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.** **Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.**
Вот так сработает: Вот так сработает:
```html ```html
<!--+ autorun height=auto --> <!--+ autorun height=100 -->
<form id="form"> <form id="form">
<input type="text" name="name" value="Ваше имя"> <input type="text" name="name" value="Ваше имя">
<input type="text" name="surname" value="Ваша фамилия"> <input type="text" name="surname" value="Ваша фамилия">
@ -264,11 +265,11 @@
У них две особенности: У них две особенности:
<ul> <ul>
<li>Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.</li> <li>Не поддерживаются Firefox (хотя поддерживаются даже старейшими IE), см. [](https://bugzilla.mozilla.org/show_bug.cgi?id=687787).</li>
<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li> <li>Должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
</ul> </ul>
Для кросс-браузерной поддержки фокуса с делегированием можно использовать сочетать эти события с фазой перехвата. Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать `focus` на стадии перехвата, ну а `focusin/focusout` -- в IE8-, где стадии перехвата нет.
Подсветка формы в примере ниже работает во всех браузерах. Подсветка формы в примере ниже работает во всех браузерах.
@ -296,9 +297,12 @@
var form = document.forms.form; var form = document.forms.form;
if (form.addEventListener) { if (form.addEventListener) {
// focus/blur на стадии перехвата срабатывают во всех браузерах
// поэтому используем их
form.addEventListener('focus', onFormFocus, true); form.addEventListener('focus', onFormFocus, true);
form.addEventListener('blur', onFormBlur, true); form.addEventListener('blur', onFormBlur, true);
} else { // IE8- } else {
// ветка для IE8-, где нет стадии перехвата, но есть focusin/focusout
form.onfocusin = onFormFocus; form.onfocusin = onFormFocus;
form.onfocusout = onFormBlur; form.onfocusout = onFormBlur;
} }
@ -319,13 +323,9 @@
</li> </li>
</ul> </ul>
Текущий элемент, на котором фокус, доступен как `document.activeElement`. [smart header="Текущий элемент: `document.activeElement`"]
Кстати, текущий элемент, на котором фокус, доступен как `document.activeElement`.
[/smart]