feat: update translation

Author: leviding

2-ui/3-event-details/7-keyboard-events/article.md

@@ -149,31 +149,38 @@ function checkPhoneKey(key) {
 
 我们都知道，像上面那样，从事件处理程序返回 `false` 会阻止事件的默认行为，所以如果按下的按键未通过按键检查，那么 `<input>` 中什么都不会出现（从事件处理程序返回 `true` 不会对任何行为产生影响，只有返回 `false` 会产生对应的影响）。
 
-请注意，像 `key:Backspace`，`key:Left`，`key:Right`，`key:Ctrl+V` 这样的特殊按键在输入中无效。这是严格过滤器 `checkPhoneKey` 的副作用。
-
-让我们将过滤条件放松一下：
+请注意，像 `key:Backspace`、`key:Left`、`key:Right` 这样的特殊按键在 `<input>` 中无效。这是严格过滤器 `checkPhoneKey` 的副作用。这些按键会使 `checkPhoneKey` 返回 `false`。
 
+让我们将过滤条件放宽一点，允许 `key:Left`、`key:Right`、`key:Delete` 和 `key:Backspace` 按键：
 
 ```html autorun height=60 run
 <script>
 function checkPhoneKey(key) {
   return (key >= '0' && key <= '9') ||
-    ['+','(',')','-','ArrowLeft','ArrowRight','Delete','Backspace'].includes(key);
+    ['+','(',')','-',*!*'ArrowLeft','ArrowRight','Delete','Backspace'*/!*].includes(key);
 }
 </script>
 <input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">
 ```
 
 现在方向键和删除键都能正常使用了。
 
-……但我们仍然可以使用鼠标右键单击 + 粘贴来输入任何内容。因此，这个过滤器并不是 100% 可靠。我们可以让它就这样吧，因为大多数情况下它是有效的。或者，另一种方式是跟踪 `input` 事件 —— 在任何修改后触发。这样我们就可以检查新值，并在其无效时高亮/修改它。
+……即使我们对按键进行了过滤，但仍然可以使用鼠标右键单击 + 粘贴来输入任何内容。移动端设备提供了其他输入内容的方式。因此，这个过滤器并不是 100% 可靠。
+
+另一种方式是跟踪 `oninput` 事件 —— 在任何修改后都会触发此事件。这样我们就可以检查新的 `input.value`，并在其无效时修改它/高亮显示 `<input>`。或者我们可以同时使用这两个事件处理程序。
 
-## 遗存
+## 历史遗留
 
-过去曾经有一个 `keypress` 事件，还有事件对象的 `keyCode`、`charCode` 和 `which` 属性。
+过去有一个 `keypress` 事件，还有事件对象的 `keyCode`、`charCode` 和 `which` 属性。
 
 大多数浏览器对它们都存在兼容性问题，以致使该规范的开发者不得不弃用它们并创建新的现代的事件（本文上面所讲的这些事件），除此之外别无选择。旧的代码仍然有效，因为浏览器还在支持它们，但现在完全没必要再使用它们。
 
+## 移动端键盘
+
+当使用虚拟/移动端键盘时，更正式一点的名字叫做 IME（Input-Method Editor），W3C 标准规定 KeyboardEvent 的 [`e.keyCode` 应该为 `229`](https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode)，并且 [`e.key` 应该为 `"Unidentified"`](https://www.w3.org/TR/uievents-key/#key-attr-values)。
+
+当按下某些按键（例如箭头或退格键）时，虽然其中一些键盘可能仍然使用正确的值来表示 `e.key`、`e.code`、`e.keyCode`...，但并不能保证所有情况下都能对应正确的值。所以你的键盘逻辑可能并不能保证适用于移动设备。
+
 ## 总结
 
 按一个按键总是会产生一个键盘事件，无论是符号键，还是例如 `key:Shift` 或 `key:Ctrl` 等特殊按键。唯一的例外是有时会出现在笔记本电脑的键盘上的 `key:Fn` 键。它没有键盘事件，因为它通常是被在比 OS 更低的级别上实现的。

2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js

@@ -5,6 +5,8 @@ let lastTime = Date.now();
 function handle(e) {
   if (form.elements[e.type + 'Ignore'].checked) return;
 
+  area.scrollTop = 1e6;
+
   let text = e.type +
     ' key=' + e.key +
     ' code=' + e.code +

2-ui/4-forms-controls/1-form-elements/article.md

@@ -8,11 +8,11 @@
 
 文档中的表单是特殊集合 `document.forms` 的成员。
 
-这就是所谓的“命名的集合”：既是被命名了的，也是有序的。我们既可以使用名字，也可以使用在文档中的编号来获取表单。
+这就是所谓的**“命名的集合”**：既是被命名了的，也是有序的。我们既可以使用名字，也可以使用在文档中的编号来获取表单。
 
 ```js no-beautify
-document.forms.my - name="my" 的表单
-document.forms[0] - 文档中的第一个表单
+document.forms.my; // name="my" 的表单
+document.forms[0]; // 文档中的第一个表单
 ```
 
 当我们有了一个表单时，其中的任何元素都可以通过命名的集合 `form.elements` 来获取到。
@@ -38,7 +38,7 @@ document.forms[0] - 文档中的第一个表单
 
 可能会有多个名字相同的元素，这种情况经常在处理单选按钮中出现。
 
-在这种情况下，`form.elements[name]` 将会是一个集合，例如：
+在这种情况下，`form.elements[name]` 将会是一个**集合**。例如：
 
 ```html run height=40
 <form>
@@ -177,18 +177,16 @@ input.checked = true; // 对于复选框（checkbox）或单选按钮（radio bu
 一个 `<select>` 元素有 3 个重要的属性：
 
 1. `select.options` —— `<option>` 的子元素的集合，
-2. `select.value` —— 当前所选择的 `<option>` 的 `value`，
-3. `select.selectedIndex` —— 当前所选择的 `<option>` 的编号。
+2. `select.value` —— 当前所选择的 `<option>` 的 **value**，
+3. `select.selectedIndex` —— 当前所选择的 `<option>` 的**编号**。
 
 它们提供了三种为 `<select>` 设置 `value` 的不同方式：
 
-1. 找到对应的 `<option>` 元素，并将 `option.selected` 设置为 `true`。
-2. 将 `select.value` 设置为对应的 `value`。
-3. 将 `select.selectedIndex` 设置为对应 `<option>` 的编号。
+1. 找到对应的 `<option>` 元素（例如在 `select.options` 中），并将其 `option.selected` 设置为 `true`。
+2. 如果我们知道新的值：将 `select.value` 设置为对应的新的值。
+3. 如果我们知道新的选项的索引：将 `select.selectedIndex` 设置为对应 `<option>` 的编号。
 
-第一个方式最明显，但是 `(2)` 和 `(3)` 通常来说会更方便。
-
-下面是一个例子：
+下面是这三种方式的示例：
 
 ```html run
 <select id="select">
@@ -198,18 +196,19 @@ input.checked = true; // 对于复选框（checkbox）或单选按钮（radio bu
 </select>
 
 <script>
-  // 所有这三行做的是同一件事
+  // 下面这三行做的都是同一件事
   select.options[2].selected = true;
   select.selectedIndex = 2;
   select.value = 'banana';
+  // 请注意：选项编号是从零开始的，所以编号 2 表示的是第三项
 </script>
 ```
 
-和大多数其它控件不同，如果 `<select>` 具有 `multiple` 特性（attribute），则允许多选。尽管这种功能可用，但很少被使用。
+和大多数其它控件不同，如果 `<select>` 具有 `multiple` 特性（attribute），则允许多选。尽管这个特性（attribute）很少被用到。
 
-如果必须使用的话，请使用第一种方式：在子元素 `<option>` 中添加/移除 `selected` 属性。
+对于多选的值，使用第一种设置值的方式：在 `<option>` 子元素中添加/移除 `selected` 属性。
 
-我们可以通过 `select.options` 来获取它们的集合，例如：
+这是一个如何从多选的 `<select>` 中获取选择的值的示例：
 
 ```html run
 <select id="select" *!*multiple*/!*>
@@ -232,31 +231,31 @@ input.checked = true; // 对于复选框（checkbox）或单选按钮（radio bu
 
 ### new Option
 
-这很少单独使用。但它仍然是一个有趣的东西。
-
-在 [规范](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) 中，有一个很好的简短语法可以创建 `<option>` 元素：
+在 [规范](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) 中，有一个很好的简短语法可以创建一个 `<option>` 元素：
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
 ```
 
-参数：
+此语法是可选的。我们可以使用 `document.createElement('option')` 并手动设置特性（attribute）。不过，这种语法写起来可能会更短，其参数如下：
 
 - `text` —— `<option>` 中的文本，
 - `value` —— `<option>` 的 `value`，
 - `defaultSelected` —— 如果为 `true`，那么 `selected` HTML-特性（attribute）就会被创建，
 - `selected` —— 如果为 `true`，那么这个 `<option>` 就会被选中。
 
-你可能会对 `defaultSelected` 和 `selected` 有一些疑惑。这很简单：`defaultSelected` 设置的是 HTML-特性（attribute），我们可以使用 `option.getAttribute('selected')` 来获得。而 `selected` —— 无论这个 `option` 是否被选择，它都很重要。通常，这两个值都设置为 `true`，或者都不设置（与设置为 `false` 是一样的）。
+`defaultSelected` 和 `selected` 的区别是，`defaultSelected` 设置的是 HTML-特性（attribute），我们可以使用 `option.getAttribute('selected')` 来获得。而 `selected` 设置的是选项是否被选中。
 
-例如：
+在实际使用中，通常应该将**同时**将这两个值设置为 `true` 或 `false`。（或者，直接省略它们；两者都默认为 `false`。）
+
+例如，下面是一个新的**未被选中的**选项：
 
 ```js
 let option = new Option("Text", "value");
 // 创建 <option value="value">Text</option>
 ```
 
-选择相同的元素：
+相同的选项，但被选中了：
 
 ```js
 let option = new Option("Text", "value", true, true);
@@ -290,9 +289,9 @@ let option = new Option("Text", "value", true, true);
 `element.form`
 : 元素通过 `form` 属性来引用它们所属的表单。
 
-`value` 可以被通过 `input.value`，`textarea.value`，`select.value` 等来获取到，对于单选按钮和复选框来说可以使用 `input.checked`。
+`value` 可以被通过 `input.value`，`textarea.value`，`select.value` 等来获取到。（对于单选按钮（radio button）和复选框（checkbox），可以使用 `input.checked` 来确定是否选择了一个值。
 
-对于 `<select>` 元素，们可以通过索引 `select.selectedIndex` 来获取它的 `value`，也可以通过 `<option>` 集合 `select.options`。
+对于 `<select>`，我们可以通过索引 `select.selectedIndex` 来获取它的 `value`，也可以通过 `<option>` 集合 `select.options` 来获取它的 `value`。
 
 这些是开始使用表单的基础。我们将在本教程中进一步介绍更多示例。
 

2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md

@@ -9,4 +9,5 @@ importance: 4
 [demo src="solution"]
 
 P.S. 除了 `#mouse` 元素外，不要在任何地方放置事件处理程序。
+
 P.P.S. 不要修改 HTML/CSS，这个方法应该是通用的，可以用于任何元素。

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

@@ -118,7 +118,7 @@ Your email please: <input type="email" id="input">
 
 切换顺序为：从 `1` 开始的具有 `tabindex` 的元素排在前面（按 `tabindex` 顺序），然后是不具有 `tabindex` 的元素（例如常规的 `<input>`）。
 
-具有 `tabindex` 的元素按文档源顺序（默认顺序）切换。
+不具有 `tabindex` 的元素按文档源顺序（默认顺序）切换。
 
 这里有两个特殊的值：
 

2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html

@@ -96,7 +96,7 @@
       let years = form.months.value / 12;
       if (!years) return;
 
-      let result = Math.round(initial * (1 + interest * years));
+      let result = Math.round(initial * (1 + interest) ** years);
 
       let height = result / form.money.value * 100 + 'px';
       document.getElementById('height-after').style.height = height;

2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md

@@ -17,5 +17,5 @@ importance: 5
 // initial: 总存款的初始值
 // interest: 例如 0.05 意味着每年涨幅 5% 
 // years: 要等待多少年
-let result = Math.round(initial * (1 + interest * years));
+let result = Math.round(initial * (1 + interest) ** years);
 ```