minor renovations, beautify round 2 (final)

2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md

@@ -5,7 +5,8 @@
 Так как мы преобразуем `<div>` в `<textarea>` и обратно, нам нужно сделать их практически одинаковыми с виду:
 
 ```css
-#view, #area {
+#view,
+#area {
   height: 150px;
   width: 400px;
   font-family: arial;
@@ -18,10 +19,11 @@
 Для того, чтобы сделать размер `#area` таким же, как и `#view`, добавим поля(padding):
 
 ```css
-#view {  
+#view {
   /* padding + border = 3px */
-  padding: 2px; 
-  border:1px solid black; 
+  
+  padding: 2px;
+  border: 1px solid black;
 }
 ```
 
@@ -29,16 +31,16 @@ CSS для `#area` заменяет поля границами:
 
 ```css
 #area {
-  border: 3px groove blue;  
+  border: 3px groove blue;
   padding: 0px;
-
-  display:none;
+  display: none;
 }
 ```
 
 По умолчанию, текстовое поле скрыто. Кстати, этот код убирает дополнительную рамку в ряде браузеров, которая появляется вокруг поля, когда на него попадает фокус:
 
 ```css
+/*+ no-beautify */
 #area:focus { 
   outline: none; /* убирает рамку при фокусе */
 }
@@ -77,21 +79,21 @@ document.onkeydown = function(e) {
 
 ```js
 function edit() {
-    view.style.display = 'none';
-    area.value = view.innerHTML;
-    area.style.display = 'block';
-    area.focus();
+  view.style.display = 'none';
+  area.value = view.innerHTML;
+  area.style.display = 'block';
+  area.focus();
 }
 
 function save() {
-    area.style.display = 'none';
-    view.innerHTML = area.value;
-    view.style.display = 'block';
+  area.style.display = 'none';
+  view.innerHTML = area.value;
+  view.style.display = 'block';
 }
 
 function cancel() {
-    area.style.display = 'none';
-    view.style.display = 'block';
+  area.style.display = 'none';
+  view.style.display = 'block';
 }
 ```
 

2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md

@@ -46,8 +46,8 @@ document.onkeypress = function(e) {
 Например, когда пользователь открыл страницу, мы не знаем, включен ли [key CapsLock]. Затем, мы получаем событие `keydown` для [key CapsLock]. Но мы все равно не знаем его состояния, был ли [key CapsLock] *выключен* или, наоборот, включен.
 
 ```js
-if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
-  document.onkeydown = function(e) {  
+if (navigator.platform.substr(0, 3) != 'Mac') { // событие для CapsLock глючит под Mac
+  document.onkeydown = function(e) {
     if (e.keyCode == 20 && capsLockEnabled !== null) {
       capsLockEnabled = !capsLockEnabled;
     }
@@ -73,18 +73,18 @@ if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock
 Код проверки поля:
 
 ```html
-<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
+<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()" />
 
 <div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>
 
 <script>
-function checkCapsWarning() {
-  document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
-}
+  function checkCapsWarning() {
+    document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
+  }
 
-function removeCapsWarning() {
-  document.getElementById('caps').style.display = 'none';
-}
+  function removeCapsWarning() {
+    document.getElementById('caps').style.display = 'none';
+  }
 </script>
 ```
 

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

@@ -57,23 +57,32 @@
 
 ```html
 <!--+ run autorun height=80 -->
-<style> .error { background: red; } </style>
+<style>
+  .error {
+    background: red;
+  }
+</style>
 
-<div>Возраст: <input type="text" id="age"></div>
-  
-<div>Имя: <input type="text"></div>
+<div>Возраст:
+  <input type="text" id="age">
+</div>
+
+<div>Имя:
+  <input type="text">
+</div>
 
 <script>
-age.onblur = function() {
-  if (isNaN(this.value)) { // введено не число
-    // показать ошибку
-    this.classList.add("error");
-    age.focus();*!*
-  } else {
-    this.classList.remove("error");
-  }
-};
-
+  age.onblur = function() {
+    if (isNaN(this.value)) { // введено не число
+      // показать ошибку
+      this.classList.add("error");
+*!*
+      age.focus();
+*/!* 
+    } else {
+      this.classList.remove("error");
+    }
+  };
 </script>
 ```
 
@@ -117,7 +126,7 @@ age.onblur = function() {
 
 ```html
 <input type="text" name="search">
-<script> 
+<script>
   document.getElementsByName('search')[0].focus();
 </script>
 ```
@@ -175,7 +184,7 @@ age.onblur = function() {
 В примере ниже есть список элементов. Кликните на любой из них и нажмите "tab".
 
 ```html
-<!--+ autorun -->
+<!--+ autorun  no-beautify -->
 Кликните на первый элемент списка и нажмите Tab. Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.
 <ul>
   <li tabindex="1">Один</li>
@@ -225,7 +234,11 @@ age.onblur = function() {
   <input type="text" name="surname" value="Ваша фамилия">
 </form>
 
-<style> .focused { outline: 1px solid red; } </style>
+<style>
+  .focused {
+    outline: 1px solid red;
+  }
+</style>
 
 <script>
 *!*
@@ -262,22 +275,29 @@ age.onblur = function() {
   <input type="text" name="surname" value="Ваша фамилия">
 </form>
 <style>
-.focused { outline: 1px solid red; }
+  .focused {
+    outline: 1px solid red;
+  }
 </style>
 
 <script>
-function onFormFocus() { this.className = 'focused'; }
-function onFormBlur() { this.className = ''; }
+  function onFormFocus() {
+    this.className = 'focused';
+  }
 
-var form = document.forms.form;
+  function onFormBlur() {
+    this.className = '';
+  }
 
-if (form.addEventListener) { 
-  form.addEventListener('focus', onFormFocus, true); 
-  form.addEventListener('blur', onFormBlur, true); 
-} else {  // IE8-
-  form.onfocusin = onFormFocus;
-  form.onfocusout = onFormBlur;
-}
+  var form = document.forms.form;
+
+  if (form.addEventListener) {
+    form.addEventListener('focus', onFormFocus, true);
+    form.addEventListener('blur', onFormBlur, true);
+  } else { // IE8-
+    form.onfocusin = onFormFocus;
+    form.onfocusout = onFormBlur;
+  }
 </script>
 ```