两个事件让你的中文输入和表单提交更和谐

前端在开发表单的时候，常常会有「回车提交表单」这个需求。那你有没有碰到过下面这个问题呢？

你的用户名是“abc2020”，当你在输入框中输入“abc”的时候，发现当前是中文输入状态。你毫无犹豫敲下回车把“abc”填入了输入框中，但同时也触发了“提交”操作。

也许你开始做前端没多久，没碰到过；也许你碰到了，但不知所措选择了忽视，比如下面这段视频（随时可能被修复）：

[video(video-6W2phDkB-1581067882191)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=87322929)(image-https://img-blog.csdnimg.cn/img_convert/97ef709b7aad000ccdedc440a39ac48d.png)(title-京东登录示例)]

其实这个问题 MDN 已经帮我们通过 composition* 事件簇解决了。下面让我们来了解下这个事件家族吧。

这个事件簇包含下面三个事件：

• compositionstart
• compositionupdate
• compositionend

下面是用来解决上面问题的小示例，只要用到 *start 和 *end 两个事件。

➥ Html

<input id="username" />

➥ JavaScript

let flag = false // 如果为 true 则阻止表单提交
const inputElm = document.getElementById('username')

inputElm.addEventListener('keydown', (event) => {
  if (event.keyCode === 13 && !false) {
	submit()
  }
})

inputElm.addEventListener('compositionstart', (event) => {
  flag = true
})

inputElm.addEventListener('compositionend', (event) => {
  flag = false
})

当你开始输入拼音的时候，*start 会被触发，输入结束后触发 *end。不过有几点需要注意：

1. composition* 事件簇需要通过 addEventListener 添加，Element 元素没有 oncomposition* 属性。
2. 事件触发顺序：keydown → compositionend → keyup，所以你的回车触发事件要绑在 keydown 上，否则依然会触发 submit()。