QQ聊天对话框（Js实现，支持表情插入文本中间）

98 阅读 0 评论 65 点赞

我是靠谱客的博主清脆乐曲，最近开发中收集的这篇文章主要介绍QQ聊天对话框（Js实现，支持表情插入文本中间），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一般我们做文本对话框，都考虑使用textarea，其实，用div也可以实现，用div的好处就是可以往里插入图片、表情等，不必都显示为字符。

但是在插入表情图片或插入图片时就面临一个问题，图片怎么才能放到我输入文本的中间位置，而不是每次都追加到最后面，百度搜索了很多资料，自己试过，包装好了两种方法，一种是针对div的，一种针对textarea，当然，textarea没法显示图片，只适用于插入表情后将代表表情的字符串插入到文本中间。

代码如下：

// 在光标位置插入内容（仅适用于textarea文本输入框）
function insertValueAtCursor(myField, insertContent) {
if (myField != document.activeElement) {
myField.value = myField.value + insertContent;
return;
}
//IE support
if (document.selection) {
myField.focus();
var sel = document.selection.createRange();
sel.text = insertContent;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (typeof myField.selectionStart === 'number' || typeof myField.selectionEnd == 'number') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
console.log("startPos:" + startPos)
// save scrollTop before insert
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + insertContent + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
// restore previous scrollTop
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + insertContent.length;
myField.selectionEnd = startPos + insertContent.length;
} else {
console.log('OK')
myField.value += insertContent;
myField.focus();
}
}

// 在光标位置插入html代码，如果dom没有获取到焦点则追加到最后
function insertAtCursor(dom, html) {
if (dom != document.activeElement) { // 如果dom没有获取到焦点，追加
dom.innerHTML = dom.innerHTML + html;
return;
}
var sel, range;
if (window.getSelection) {
// IE9 或 非IE浏览器
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}

附件中我上传整个demo源码。