菜单

React.js中实现回车键Enter登录分析

Post Info:
本文 1.3k 字 浏览 阅读约 5 分钟

我们平时在计算机上登录一些网站时,基本上都可以在输入用户名密码之后,不点击登录按钮,按键盘的回车键Enter来确定登录。

或者填好一些表单,也可以使用回车键Enter提交表单。

逻辑分析

我们以登录举例,看看在React中如何实现回车键提交登录请求。

现在我们有两个输入框分别输入用户名和密码,一个按钮可以登录。

我们需要实现两个逻辑:

  1. 点击登录按钮,触发按钮onClick事件,在下面代码中即执行login()函数,进行正常登录逻辑。

  2. 用户输入完成后,不点击按钮,按键盘进行登录。

    a.) 给输入框添加onKeyUp事件

    首先我们需要确定,用户在输入完哪个输入框的值,没有丢失焦点之前可以提交登录请求。

    比如登录,一般是在输入完密码并不丢失焦点时,按回车键。那么我们需要给这个输入框加上onKeyUp事件。在下面的代码中,我们给输入密码框添加了onKeyUp事件,如果你的产品可以在任意输入框提交,则全都加上onKeyUp事件。

    注意此处是不丢失焦点,即光标仍在这个输入框内,如果用户输入完,点击了页面其他地方,导致这个输入框失去焦点,那么此时在点击键盘的键,不会触发这个input的onKeyUp事件。

    b.) 添加onKeyUp事件触发的函数

    在下面的代码中,onKeyUp事件触发了comfirmLogin函数,这个函数的内容是判断用户输入的是不是回车键,即e.key == "Enter",如果true,则是回车键,进行正常登录。

代码

<label>用户名:</label>
<input
  ref="user"
  type="text"
  placeholder="请输入用户名"
  name="user"
  required
/>
<label>密码:</label>
<input
  ref="password"
  type="password"
  placeholder="请输入密码"
  name="password"
  onKeyUp={e => this.comfirmLogin(e)}
  required
/>
<button
  type="button"
  disabled={this.state.disabledLogin}
  onClick={() => this.login()}
>
  登录
</button>
comfirmEnter(e) {
  if (e.key == "Enter") {
    this.login();
  }
}

关于onKeyUp / onKeyDown / onKeyPress

  1. onkeyup属性用来获取或设置当前元素的keyup事件的事件处理函数。

    在当前元素上释放键盘按键时会触发keyup事件。

    如果一直按着键盘某键而不释放、不松手,那么不会被触发。

  2. onkeydown属性用来获取或设置当前元素的keydown事件的事件处理函数。

    当用户按下键盘上的按键时会触发keydown事件。

    只要按下键盘就会触发,不管是否释放。

  3. onkeypress属性用来获取或设置当前元素的keypress事件的事件处理函数。

    当用户在键盘上按下任意键时,应当会触发 keypress 事件。然则有些浏览器不会触发某些键的 keypress 事件。

    Webkit-based 浏览器(如 Google Chrome 及 Safari)不会触发方向键的 keypress 事件。

    Firefox 不会触发如 SHIFT 键等修改键的 keypress 事件。

    存在浏览器兼容性问题。

在定义中为小写,但在React中使用时,使用小驼峰形式的函数名。

在上面的代码中我们使用了onKeyUp。

使用其他两个也可以,但是如果此处不是判断Enter键,有可能包含方向键,那么使用onKeyPress会存在兼容问题。

而使用onKeyDown在登录这个场景没有onKeyUp更符合用户使用习惯,如果是游戏等需要灵敏度高时,onKeyDown更符合场景。

关于e.keyCode / e.charCode / e.key

  1. e.keyCode:

    KeyboardEvent.keyCode,返回一个表示系统和实现相关的数字代码的 Number, 用于标识按键的未修改值。

  2. e.charCode:

    KeyboardEvent.charCode,返回一个表示按键的 Unicode 编码的 Number; 此属性仅由 keypress 事件使用。 对于其 char 属性包含多个字符的按键是该属性中第一个字符的 Unicode 值。在火狐26中, 将返回可打印字符的代码。

  3. e.key:

    KeyboardEvent.key,返回一个事件表示键值的 DOMString。

我们使用上面的React.js代码,修改密码输入框的属性进行测试。

如果使用onKeyUp / onKeyDown,按下回车键Enter:

e.keyCode = 13
e.charCode = 0
e.key = "Enter"
e.code = undefined

如果使用onKeyPress,按下回车键Enter:

e.keyCode = 0
e.charCode = 13
e.key = "Enter"
e.code = undefined

在MDN上显示,charCode和keyCode详情页介绍都有This feature is no longer recommended,不推荐再使用这两个属性了。在测试结果中,使用不同的属性,这两个属性的结果完全相反。

在charCode的详情页写着Do not use this property, as it is deprecated. Use the key property instead.,推荐我们使用KeyboardEvent.key属性。

关于e.code,如果用户没有使用预期的键盘布局,则无法使用code值来确定用户按键的名称。要确定哪个字符与键事件对应,请改用KeyboardEvent.key属性。上面代码测试结果中,e.code全为undefined。

上面的验证中,只有e.key的值是相同的。根据MDN和实际测试,请使用KeyboardEvent.key。

参考资料

onKeyUp / onKeyDown / onKeyPress

keyCode / charCode / key

- END -

目录