type
status
date
slug
summary
tags
category
icon
password
我监听了一个键盘事件，按’delete’键执行一个删除操作：
在桌面端，这个操作能正常工作，但我们编译成wasm包，在网页上却无法执行，是什么原因呢？经过一番研究，原来这个问题和canvas的焦点有关系。
在网页上，canvas默认情况下无法直接获取键盘焦点。
要使它接受键盘输入，需要设置tabindex属性和focus.
这样设置后，就可以监听到键盘输入了。
另外，网页上的按键值可能不是127，是0，这里也需要做一点修改：
具体是多少，可以用一个调试输出，看按下’delete’后实际的按键输出keycode。
我的输出是：
后记
某些情况下，我们很容易失去焦点而使得键盘事件失效，我们可能需要在很多地方（涉及到的逻辑点）加canvas.focus().这样至少有两个缺点，一是要多次设置，二是不一定能考虑到所有的地方，所以不是最优的解。那有没有只设置一次的办法呢，
当然有的。
我们可以绑定click event，全局监听点击事件,在点击事件发生时，设置焦点。
理论上说像上面这样设置后，当用户点击网页空白时，canvas会被自动聚焦。
不过如果我们的页面有文本框、输入框时，可能会遇上麻烦：在输入时，强制焦点切换。
因此，我们还需要做一个判断户点击的元素不是
<input>、<textarea>,也不是一个 contentEditable 的区域（即不是可编辑区域）：
这样之后的效果是，用户点击
<input> 或 <textarea> 输入文字则不受打扰。
- 作者:AndyJMR
- 链接:http://andyjmr.com/technology/canvas-set-focus
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章