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源码。