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

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

代码如下：

// 在光标位置插入内容（仅适用于textarea文本输入框）
function insertValueAtCursor(myField, insertContent) {if (myField != document.activeElement) {myField.value = myField.value + insertContent;return;}//IE supportif (document.selection) {myField.focus();var sel = document.selection.createRange();sel.text = insertContent;sel.select();}//MOZILLA/NETSCAPE supportelse if (typeof myField.selectionStart === 'number' || typeof myField.selectionEnd == 'number') {var startPos = myField.selectionStart;var endPos = myField.selectionEnd;console.log("startPos:" + startPos)// save scrollTop before insertvar restoreTop = myField.scrollTop;myField.value = myField.value.substring(0, startPos) + insertContent + myField.value.substring(endPos, myField.value.length);if (restoreTop > 0) {// restore previous scrollTopmyField.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 selectionif (lastNode) {range = range.cloneRange();range.setStartAfter(lastNode);range.collapse(true);sel.removeAllRanges();sel.addRange(range);}}} else if (document.selection && document.selection.type != "Control") {// IE < 9document.selection.createRange().pasteHTML(html);}
}

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