需解决的问题:
- Enter发送,Ctrl+Enter换行
- 中文输入回车问题
- 消息格式的显示(换行、预格式富文本)
- 消息发送后的显示滚屏
针对以上问题,逐一解决如下:
一、发送和换行问题
textarea中默认Enter和Shift+Enter换行,若需要改成Enter发送,需要监听键盘事件修改Enter默认行为。其中,手动插入换行符需要获取光标位置,并在当前输入位置插入换行符后保持光标位置后移至换行符后。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
quickSendMsg(e: KeyboardEvent) {
const key = e.key.toLowerCase();
const isCtrlPressed = e.altKey || e.ctrlKey || e.metaKey || e.shiftKey;
const isShiftPressed = e.shiftKey;
if (key === 'enter') {
if (!isCtrlPressed) {
e.preventDefault();
this.sendMsg(this.inputMsg);
} else {
if (!isShiftPressed) {
textPosition(e.target, '\n', false);
}
}
}
}
以上代码引用了光标位置控制插件的实现,参考:https://github.com/ifuyun/textposition
二、中文输入问题
在中文输入状态,输入Enter会直接转为输入英文,若不进行控制,将会发送消息且内容为当前中文输入法输入前的内容。
通过compositionstart和compositionend判断中文输入状态:
- 1
- 2
- 3
- 4
- 5
- 6
document.getElementById('msgInput').addEventListener('compositionstart', (e) => {
this.inputFlag = true;
}, false);
document.getElementById('msgInput').addEventListener('compositionend', (e) => {
this.inputFlag = false;
}, false);
在发送前判断是否中文输入状态:
- 1
- 2
- 3
if (!this.inputFlag) {
this.sendMsg(this.inputMsg);
}
三、消息格式显示问题
两方面,针对发出的消息,需要处理的仅有换行的显示(不考虑图片等多媒体内容),而针对收到的消息,需要进行富文本形式的展示。前者,通过pre标签原样显示文本;后者,通过safeHtml pipe显示预格式富文本,或引入类似markdown等指定格式的解析器。
四、消息滚屏
消息发送后,滚屏至消息展示区域底部,以展示最新的消息。
- 1
- 2
- 3
- 4
const {scrollHeight, offsetHeight} = msgBoxEle;
setTimeout(() => {
msgBoxEle.scrollTop = scrollHeight - offsetHeight;
}, 0);
至此,问题全部解决。