JavaScript监听键盘事件
<p>在写网页的时候，常常需要监听键盘事件，让我们来看看如何实现吧。</p><h3 id="监听方式">监听方式</h3>
<p>键盘事件往往是全局监听，设监听的函数为keyboard()。</p>
<ol>
<li>keyup事件类型。该类型触发条件为按键按下去<strong>并松开</strong>。<pre><code class="language-javascript">//长按并松开只触发一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //记得不要加括号！
</code></pre>
</li>
<li>keydown事件类型。该类型触发条件为按键按下去。<pre><code class="language-javascript">//长按可以触发多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;
</code></pre>
</li>
<li>keypress事件类型。该类型触发条件为按键按下去且产生了字符。<pre><code class="language-javascript">//长按可以触发多次
//遇到'1'，'a'，回车等按键可以触发，但del键，向上键等则不会
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;
</code></pre>
需要注意的是：<strong>keypress的兼容性并不是很好</strong>，比如安卓系统就不支持，所以尽量避免使用。<br>
onkey___ 和 addEventListener之间，最好选后者。<br>
另外，如果keyboard不带参，则监听的事件是任何符合条件的按键，即只要你按了键盘，就会触发事件。</li>
</ol>
<h3 id="监听具体事件即按了哪个键">监听具体事件（即按了哪个键）</h3>
<p>上文提到的keyboard函数是<strong>可以设形参</strong>的，且在<strong>调用的时候不需加实参</strong>。</p>
<pre><code class="language-javascript">function keyboard(eve) {
...
}
document.onkeyup = keyboard;//不需要加参数和括号
</code></pre>
<p>此时的eve便是键盘事件类型的变量，它有以下属性：</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">意义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">事件对应按钮的字符</td>
</tr>
<tr>
<td style="text-align: left">keyCode</td>
<td style="text-align: left">事件对应按钮的Unicode码</td>
</tr>
<tr>
<td style="text-align: left">which</td>
<td style="text-align: left">事件对应按钮的Unicode码</td>
</tr>
<tr>
<td style="text-align: left">其中，不同的浏览器对keyCode和which的支持情况是不同的，下文会有关于提升兼容性的方法。</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p>举个例子：</p>
<pre><code class="language-html"><p id="msg1"></p>
<p id="msg2"></p>
<script>
function keyboard(eve) {
msg1.textContent += eve.key;
msg2.textContent += eve.keyCode || eve.which;
//该方法可以提升代码的兼容性
}
document.onkeyup = keyboard;
</script>
</code></pre>
<pre><code>input:
a
output:
a
65
</code></pre>
<p>需要注意的是：key属性的兼容性并不高，最好是先获取Unicode码，再转成对应字符。</p>
<pre><code class="language-javascript">let x = eve.keyCode || eve.which;
let key = String.fromCharCode(x);
</code></pre>
<p>想知道某个按键的Unicode码，可以查手册，也可以在控制台中试验。<br>
简单点的可以用ASCII码来顶着 https://www.runoob.com/tags/html-ascii.html 。</p><br><br>
来源：https://www.cnblogs.com/ttjibu/p/13019840.html
頁:
[1]