input 如何监听输入中文 - HelloWorld开发者社区

input 组合事件

compositionEvent 组合事件是拆分了不同步骤的事件的组合，是由 compositionStart，compositionUpdate 和 compositionEnd三个事件组合而成。

Start 和 End 事件只执行一次，Update 会执行多次。
输入前，会触发 Start 和 Update 事件；没有选中中文之前，会一直触发 Update 事件；选中文字后，会触发 End 事件；一个组合事件完成，以此循环。

compositionstart

输入法编辑器开始新的输入合成时会触发 compositionstart事件。
例如：当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

compositionupdate

字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）会触发 compositionupdate 事件。

compositionend

当文本段落的组成完成或取消时, compositionend 事件将被触发。

注意：清除键、粘贴、英文字母和数字是不会触发这几个事件的。Start 和 Update 事件会在 onChange 之前触发，End 事件在onChange之后触发。

例子

简单使用

<input 
  placeholder="Basic usage" 
  onChange={e => console.log('onchange', e.target.value)}
  onCompositionStart={e => console.log('onCompositionStart', e.target.value)}
  onCompositionUpdate={e => console.log('onCompositionUpdate', e.target.value)}
  onCompositionEnd={e => console.log('onCompositionEnd', e.target.value)}
/>

输入英文'suzhou', 只会触发onChange事件：

input 如何监听输入中文

输入中文‘苏州’，触发事件如下：

input 如何监听输入中文

输入中文‘苏州’后，删除‘州’，只会触发onChange事件：

input 如何监听输入中文

直接使用 onCompositionEnd事件，只能监听到输入改变，不能监听到删除。

监听输入的中文字符变化，如何实现？

let isOnComposition = false
  
function handleComposition(e) {
  console.log(e.type, e.target.value)
  if (e.type === 'compositionend') {
    isOnComposition = false
    if (!isOnComposition) {
      onChange(e);
    }
  } else {
    isOnComposition = true
  }
}

function onChange(e) {
  if (!isOnComposition) {
    console.log('onChange', e.target.value)
  }
}

ReactDOM.render(
 <input
  placeholder="Basic usage" 
  onChange={onChange}
  onCompositionStart={handleComposition} 
  onCompositionUpdate={handleComposition} 
  onCompositionEnd={handleComposition} 
/>, mountNode);

输入英文‘suzhou’，只会触发 onchange 事件：

input 如何监听输入中文