add: 键盘事件

2019-11-26 19:49:07 +08:00
parent 94e562d95f
commit 97c21c682e
3 changed files with 86 additions and 20 deletions
--- a/04-JavaScript基础/29-事件委托.md
+++ b/04-JavaScript基础/29-事件委托.md
@@ -79,3 +79,18 @@

 - [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)

+
+
+
+
+## 我的公众号
+
+想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+![](http://img.smyhvae.com/20190101.png)
+
+
+
+
--- a/04-JavaScript基础/30-键盘事件.md
+++ b/04-JavaScript基础/30-键盘事件.md
@@ -15,7 +15,6 @@

 `DOMMouseScroll`：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。

-
 ## 键盘事件

 ### 事件名
@@ -56,7 +55,7 @@
 可以通过`event`事件对象的`keyCode`来获取按键的编码。


-此外，`event`事件对象还提供了以下几个属性：
+此外，`event`事件对象里面还提供了以下几个属性：

 - altKey

@@ -65,11 +64,63 @@
 - shiftKey


-上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。
-
-
-
-
+上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。代码举例：
+
+```html
+    <body>
+        <script>
+            document.onkeydown = function(event) {
+                event = event || window.event;
+                console.log('qianguyihao：键盘按下了');
+
+                // 判断y和ctrl是否同时被按下
+                if (event.ctrlKey && event.keyCode === 89) {
+                    console.log('ctrl和y都被按下了');
+                }
+            };
+        </script>
+    </body>
+```
+
+
+**举例**：input 文本框中，禁止输入数字。代码实现：
+
+
+```html
+    <body>
+        <input type="text" />
+
+        <script>
+            //获取input
+            var input = document.getElementsByTagName('input')[0];
+
+            input.onkeydown = function(event) {
+                event = event || window.event;
+
+                //console.log('qianguyihao:' + event.keyCode);
+                //数字 48 - 57
+                //使文本框中不能输入数字
+                if (event.keyCode >= 48 && event.keyCode <= 57) {
+                    //在文本框中输入内容，属于onkeydown的默认行为
+                    return false; // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
+                }
+            };
+        </script>
+    </body>
+
+```
+
+
+## 举例
+
+
+## 我的公众号
+
+想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+![](http://img.smyhvae.com/20190101.png)