minor fixes
This commit is contained in:
parent
6bf5977407
commit
a592e89fdb
20 changed files with 184 additions and 96 deletions
|
@ -272,11 +272,11 @@ div.parentNode.insertBefore(div2, div.nextSibling);
|
|||
<dl>
|
||||
<dt>`parentElem.removeChild(elem)`</dt>
|
||||
<dd>Удаляет `elem` из списка детей `parentElem`.</dd>
|
||||
<dt>`parentElem.replaceChild(elem, currentElem)`</dt>
|
||||
<dd>Среди детей `parentElem` заменяет `currentElem` на `elem`.</dd>
|
||||
<dt>`parentElem.replaceChild(newElem, elem)`</dt>
|
||||
<dd>Среди детей `parentElem` удаляет `elem` и вставляет на его место `newElem`.</dd>
|
||||
</dl>
|
||||
|
||||
Оба этих метода возвращают удаленный узел. Если нужно, его можно вставить в другое место DOM тут же или в будущем.
|
||||
Оба этих метода возвращают удаленный узел, то есть `elem`. Если нужно, его можно вставить в другое место DOM тут же или в будущем.
|
||||
|
||||
[smart]
|
||||
Если вы хотите *переместить* элемент на новое место -- не нужно его удалять со старого.
|
||||
|
@ -399,13 +399,11 @@ div.parentNode.insertBefore(div2, div.nextSibling);
|
|||
<li>`parent.appendChild(elem)`</li>
|
||||
<li>`parent.insertBefore(elem, nextSibling)`</li>
|
||||
<li>`parent.removeChild(elem)`</li>
|
||||
<li>`parent.replaceChild(elem, currentElem)`</li>
|
||||
<li>`parent.replaceChild(newElem, elem)`</li>
|
||||
</ul>
|
||||
|
||||
Все эти методы возвращают `elem`.
|
||||
|
||||
**Запомнить порядок аргументов очень просто: вставляемый или удаляемый элемент -- всегда первый.**
|
||||
|
||||
Методы для изменения DOM также описаны в спецификации <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1</a>.
|
||||
|
||||
|
||||
|
|
|
@ -77,6 +77,7 @@
|
|||
// показать ошибку
|
||||
this.classList.add("error");
|
||||
*!*
|
||||
//... и вернуть фокус обратно
|
||||
age.focus();
|
||||
*/!*
|
||||
} else {
|
||||
|
@ -86,10 +87,14 @@
|
|||
</script>
|
||||
```
|
||||
|
||||
Если в примере выше ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой `<input>`, то обработчик `onblur` вернёт фокус обратно.
|
||||
Этот пример работает во всех браузерах, кроме Firefox ([ошибка](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
|
||||
|
||||
|
||||
Если ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой `<input>`, то обработчик `onblur` вернёт фокус обратно.
|
||||
|
||||
Обратим внимание -- если из `onblur` сделать `event.preventDefault()`, то такого же эффекта не будет, потому что `onblur` срабатывает уже *после* того, как элемент потерял фокус.
|
||||
|
||||
|
||||
## HTML5 и CSS3 вместо focus/blur
|
||||
|
||||
Прежде чем переходить к более сложным примерам, использующим JavaScript, мы рассмотрим три примера, когда его использовать не надо, а достаточно современного HTML/CSS.
|
||||
|
@ -157,10 +162,14 @@
|
|||
color: red;
|
||||
font-style: italic;
|
||||
}
|
||||
.my*!*::-ms-input-placeholder*/!* {
|
||||
color: red;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input class="my" type="text" placeholder="E-mail">
|
||||
Стилизуется везде, кроме IE
|
||||
Стилизованный плейсхолдер
|
||||
```
|
||||
|
||||
## Разрешаем фокус на любом элементе: tabindex
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть решение в песочнице[/edit]
|
|
@ -23,8 +23,6 @@
|
|||
Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
|
||||
Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
|
||||
</form>
|
||||
|
||||
</button>
|
||||
```
|
||||
|
||||
Ожидаемое поведение:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue