[Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend

## [Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend
中秋节前夕有朋友通过信息研讨在Ext JS 中如何给现有类添加事件， 之前大致给了我的一些思路。 假期后， 看到了发来的大致需求是给textfield 添加 compositionstart、compositionupdate 和 compositionend。虽然还不是很清楚具体的需求细节， 这里还是先把大致的实现方式和代码先列出来。
### composition 相关事件
compositionstart ，compositionupdate 和 compositionend 是和输入法相关的事件。
以compositionstart 为例，比较官方的解释是：
文本合成系统（比如输入法编辑器）开始新的输入合成时会触发**compositionstart**事件。输入法有很多种， 有文本输入、也可以是语音输入。 这里以最简单的中文输入法为例：
切换中文输入法打拼音时， 首先触发compositionstart
没打一个拼音字母，触发 compositionupdate
最后将中文填入输入框触发 compositionend
关于这三个事件的详细介绍， 可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_event
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionupdate_event
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionend_event
### 主题- 如何重写textfield 添加 composition 事件
废话不多说， 直接上代码：
```javascript
Ext.define('Ext.overrides.form.field.Text', {		
	override: 'Ext.form.field.Text',
	initEvents: function () {		
	var me = this,				
	el = me.inputEl;			
	me.callParent();		
	me.mon(el, 'compositionstart',
	me.onCompositionStart, me);	
	me.mon(el, 'compositionupdate', 
	me.onCompositionUpdate, me);
	me.mon(el, 'compositionend', 
	me.onCompositionEnd, me);	
	},			
	onCompositionStart: function () {	
	console.log('compositionstart');
	},	
	onCompositionUpdate: function () {		
	console.log('compositionupdate');		
	},	
	onCompositionEnd: function () {		
	console.log('compositionend');	
	}	
});
```

Ext.overrides 是Ext JS覆写类的方式
initEvents 是 Ext.form.field.Text 的方法， 在 me.callParent(); 之后加入新的事情， 每个事件添加对应的事件处理方法
上面的效果可以在Chrome 中进行测试， 打开控制台， 切换中文输入法输入查看控制台的输入日志， 如下图：

### 在线演示地址
https://osxm.github.io/extjs_dev_ency/demos/chp07/eventAdd.html

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend

网站导航