vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > input监听中文输入

详解input组合事件如何监听输入中文

作者:时倾

这篇文章主要为大家介绍了input组合事件如何监听输入中文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

input 组合事件

compositionEvent 组合事件是拆分了不同步骤的事件的组合,是由 compositionStartcompositionUpdate 和 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事件:

输入中文‘苏州’,触发事件如下:

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

 直接使用 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 事件:

输入中文‘苏州’,然后删除‘州’,触发事件如下:

 组合事件与 'onchange' 结合使用,就实现了监听中文字符输入变化。

input 在手机端触发软键盘的表现

输入框聚焦(触发 focus 事件)后,会弹出软键盘, 表现如下:

IOS 软键盘弹起表现

输入框获取焦点后,键盘弹起,页面(webview)没有被压缩,页面可使区域高度(height)还是原高度,只是页面(webview)整体往上滚了,且最大滚动高度(scrollTop)为软键盘高度。

Android 软键盘弹起表现

输入框获取焦点后,键盘弹起,页面(webview)高度会发生改变,高度为可视区高度(原高度减去软键盘高度),除了因为页面内容被撑开可以产生滚动,webview 本身不能滚动。

IOS 软键盘收起表现

触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时,输入框失去焦点,软键盘收起,会触发 blur事件。

Android 软键盘收起表现

触发输入框以外的区域时,输入框失去焦点,软键盘收起。但是,触发键盘上的收起按钮键盘时,软键盘收起,输入框不会失去焦点,不会触发 blur事件。

综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现,需要分开处理来监听软键盘的弹起和收起:

以上就是详解input组合事件如何监听输入中文的详细内容,更多关于input组合事件监听输入中文的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文