面试题：关于input输入框在输入法联想状态时值的问题

用户10106350

发布于 2022-10-28 18:01:24

1K0

发布于 2022-10-28 18:01:24

文章被收录于专栏：WflynnWebWflynnWeb

场景

使用 input 的 onInput 事件时，在输入拼音时，如 qiye，这时输入法会根据 qiye 这个拼音联想出其对应的中文，如企业，这时没有按回车，输入法仍旧是联想状态，但是 onInput，获取的值已经是 qiye 了，如果在 onInput 中触发接口调用，传入的值就是 qiye 这个拼音

解决方法

使用 input 的 compositionend 方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id=inputChange>
	<input id="input">
	<div style="margin-top: 50px">当前输入框中的值：<span id="inputVal"></span></div>
</div>
</body>
</html>

<script>
  const inputContainer = document.getElementById('inputChange')
  const input = inputContainer.querySelector('#input')
  const inputVal = inputContainer.querySelector('#inputVal')

  input.addEventListener('input', (e) => {
    inputVal.innerHTML = event.target.value
  })

  input.addEventListener('compositionstart', (e) => {
    console.log('compositionstart:', e)
  })

  input.addEventListener('compositionupdate', (e) => {
    console.log('compositionupdate:', e)
  })

  input.addEventListener('compositionend', (e) => {
    console.log(e.data)
    console.log('compositionend 触发：最终获取到的值：', inputVal.innerHTML);
  })
</script>

用法

下面三个事件是 DOM3 Events 中所新增的合成事件。通过这几个事件，可以明确的知道键盘在输入框中的输入状态，是否正在候选中。

事件	触发时机
compositionstart	在 IME 的文本合成系统打开时触发，表示输入即将开始
compositionupdate	在新字符插入输入字段时触发
compositionend	在 IME 的文本合成系统关闭时触发，表示恢复正常键盘输入