QQ: 282397369
可见字符录入
初步感觉入门,不过问题是一个接一个。
因为各个控件都是自画的,所以想要录入的话,需要处理键盘事件。
这个倒是容易,直接监听相应事件即可。网上资源很多。
借鉴实现一下,采用一个输入控件,绑定其
this.keyBoardInput.addEventListener('keydown', this.doKeyDown, true);
this.keyBoardInput.addEventListener('keypress', this.doKeyPress, true);
this.keyBoardInput.addEventListener('keyup', this.doKeyUp, true);
然后在相应的doKeyxxx函数中处理相应的输入事件对象即可
后续可把需要的快捷键在此进行处理。
if (kbdMsg.code == 13) { // 回车确认
if (this.EditStyle == NEditStyle.EmphasizeFirst) {
let firstWord = DrGraph.String.GetStringAt(this._Text, " ");
this.Text = this._editingText + this._Text.substring(firstWord.length);
}
this.Text = this._editingText;
return;
}
if (kbdMsg.code == 37) { // <
this.selStart = DrGraph.HelperObject.MAX(0, this.selStart - 1);
this.selLength = 0;
return;
}
if (kbdMsg.code == 36) { // Home
this.selStart = 0;
this.selLength = 0;
return;
}
if (kbdMsg.code == 35) { // end
this.selStart = this._editingText.length;
this.selLength = 0;
return;
}
if (kbdMsg.code == 39) { // <
this.selStart = DrGraph.HelperObject.MIN(this._editingText.length, this.selStart + 1);
this.selLength = 0;
return;
}
if (kbdMsg.code == 46) { // Del
if (this.selStart < this._editingText.length)
this._editingText = this._editingText.substr(0, this.selStart) + this._editingText.substring(this.selStart + this.selLength + 1);
this.selLength = 0;
return;
}
if (kbdMsg.code == 8) { // back
if (DrGraph.HelperObject.IS_IN_RANGE(this.selStart, 0, this._editingText.length)) {
this._editingText = this._editingText.substr(0, this.selStart - 1) + this._editingText.substring(this.selStart + this.selLength + 1);
this.selStart = DrGraph.HelperObject.MAX(0, this.selStart - 1);
}
this.selLength = 0;
return;
}
if (DrGraph.HelperObject.IS_IN_RANGE(kbdMsg.code, 0x20, 0x7E)) {
this._editingText = this._editingText.substr(0, this.selStart) + kbdMsg.key + this._editingText.substring(this.selStart + this.selLength);
this.selStart += 1;
this.selLength = 0;
}
中文输入
刚实现上面功能的时候,觉得还行,可用了一会,发现没法录入中文。调试半天无果。
上网找到一个GIT项目,看其功能,很强大,但学起来要花很多时间,不划算。
期望能找到一个轻量级的,或者直接几句话搞定的最好。
最终找到中文输入法下如何正确监听输入框input事件,好象能搞定。继续深入到https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event,通过对三个消息监听处理,搞定
this.keyBoardInput.addEventListener('compositionstart', this.handleImeEventStart);
this.keyBoardInput.addEventListener('compositionupdate', this.handleImeEventUpdate);
this.keyBoardInput.addEventListener('compositionend', this.handleImeEventEnd);
其实,关心的就是compositionend,直接转发成onKeyDown/keyUp就进入正常轨道了
handleImeEventEnd(ime: any) {
let destInput: HTMLInputElement | null = <HTMLInputElement><unknown>(this);
if (destInput) {
let pb = DrGraph.CanvasMaps.get(destInput);
if(pb) {
pb.doKeyDown.bind(this)(ime);
pb.doKeyUp.bind(this)(ime);
}
}
}
将生成的code直接固定为200,然后处理一下
if(kbdMsg.code == 200) { // 中文
this._editingText = this._editingText.substr(0, this.selStart) + kbdMsg.key + this._editingText.substring(this.selStart + this.selLength);
this.selStart += kbdMsg.key.length;
this.selLength = 0;
}