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

Ext JS开发大全

CmsWing

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

[Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend
oscar999于 2022-09-14 23:05:44 发布191收藏
分类专栏：Ext JS开发大全文章标签：Ext JSTextField类重写composition输入法事件
版权
中秋节前夕有朋友通过信息研讨在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 事件
废话不多说， 直接上代码：
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 中进行测试， 打开控制台， 切换中文输入法输入查看控制台的输入日志， 如下图：
![](/upload/picture/2022-09-27/upload_0487cddde94431cc066d836444980665.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航