捕获移动端键盘Enter事件

曾经终败给现在 2022-04-03 05:50 454阅读 0赞

最近做了一个需求，其中有个细节是能搜索，点击键盘上的Enter时能进行搜索，这就需要捕获键盘上的Enter事件了。

其实键盘上的每个键都有一个键盘码，我们能获取其键盘码从而判断事件。

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>按键</th> 
   <th>键码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ESC键</td> 
   <td>VK_ESCAPE (27)</td> 
  </tr> 
  <tr> 
   <td>回车键</td> 
   <td>VK_RETURN (13)</td> 
  </tr> 
  <tr> 
   <td>TAB键</td> 
   <td>VK_TAB (9)</td> 
  </tr> 
  <tr> 
   <td>Caps Lock键</td> 
   <td>VK_CAPITAL (20)</td> 
  </tr> 
  <tr> 
   <td>Shift键</td> 
   <td>VK_SHIFT ($10)</td> 
  </tr> 
  <tr> 
   <td>Ctrl键</td> 
   <td>VK_CONTROL (17)</td> 
  </tr> 
  <tr> 
   <td>Alt键</td> 
   <td>VK_MENU (18)</td> 
  </tr> 
  <tr> 
   <td>空格键</td> 
   <td>VK_SPACE ($20/32)</td> 
  </tr> 
  <tr> 
   <td>退格键</td> 
   <td>VK_BACK (8)</td> 
  </tr> 
  <tr> 
   <td>左徽标键</td> 
   <td>VK_LWIN (91)</td> 
  </tr> 
  <tr> 
   <td>右徽标键</td> 
   <td>VK_LWIN (92)</td> 
  </tr> 
  <tr> 
   <td>鼠标右键快捷键</td> 
   <td>VK_APPS (93)</td> 
  </tr> 
 </tbody> 
</table>

而我这次要用到的仅仅是Enter键代码如下：

/**
     * @msg: 监听按下搜索键
     * @param {type} 
     * @return: 
     */
    handleKeyUp = (e) => {
        // 监控 enter 事件
        if (e.keyCode === 13) {
            this.setState({
                pageNum: 1,
            });
            this.getData();
        }
    }

![关注公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220403/fd2cc0f56d2e4c12a5d7a054a274c254.png