有同學(xué)對這塊內(nèi)容比較感興趣费坊，接下來簡單介紹一下實(shí)現(xiàn)原理。
在之前輸入框內(nèi)插入表情都是通過在textarea插入特殊標(biāo)識(shí)旬痹，如[smile],后來在頁面渲染時(shí)替換成<img src="smile.gif">附井。那么如何在插入時(shí)就能看到所發(fā)送的表情呢？類似QQ两残。
效果先行
1.conteneditable屬性
傳統(tǒng)textarea文本域不能解析標(biāo)簽永毅，例如：
textarea.value+="<img src='smile.gif'>"
//輸入框內(nèi)仍然是<img src='smile.gif'>，不能解析標(biāo)簽
自然就不能使用textarea作為文本載體了人弓，我們可是使用 conteneditable屬性沼死，它可以讓你的div也具備輸入功能
<div contenteditable="true"></div>
好，div可以輸入內(nèi)容了崔赌，并且插入的標(biāo)簽也可以解析意蛀；如果只是想在段落末尾加上表情，那你大可以這樣去做：
div. innerHTML+="<img src='smile.gif'>"
但是健芭，你是要成為海賊王的男人县钥，怎么能滿足于此？
2.getSelection(獲取selection對象)
為什么要用它吟榴？有時(shí)候我們想在光標(biāo)所在位置插入標(biāo)情魁蒜，那這個(gè)對象里就有可以讓我獲取位置的方法及屬性；
Selection對象所對應(yīng)的是用戶所選擇的ranges（區(qū)域）吩翻，俗稱拖藍(lán)兜看。默認(rèn)情況下，該函數(shù)只針對一個(gè)區(qū)域
在你的頁面插入這段代碼狭瞎，當(dāng)你點(diǎn)擊的時(shí)候就會(huì)在頁面彈出你所框選的內(nèi)容了
document. onkeyup=function(){
var word = window.getSelection?window.getSelection():document.selection.createRange().text;
alert(word)
}
更細(xì)致的選取操作：
var sel = window.getSelection();
var range = sel.getRangeAt(0)//選擇第一選區(qū)
var img = new Image();
range.collapse(false);//對于IE來說细移，參數(shù)不可省略
img.src="smile.gif"http://創(chuàng)建圖片節(jié)點(diǎn)
range.insertNode(node);//插入到該選區(qū)
這樣去寫的話會(huì)存在一些問題；當(dāng)你框選內(nèi)容的時(shí)候熊锭，不會(huì)替換內(nèi)容弧轧，而是在所選內(nèi)容之后插入，這是因?yàn)?code>range.collapse()方法：
range.collapse();//（false 默認(rèn)）到選區(qū)末端 true 開始位置
//當(dāng)你框選內(nèi)容的時(shí)候碗殷，執(zhí)行該方法精绎，可以讓光標(biāo)移動(dòng)到選區(qū)結(jié)束位置，然后插入內(nèi)容
所以锌妻，當(dāng)框選的時(shí)候代乃，正常做法應(yīng)該是刪除框選內(nèi)容，然后插入新節(jié)點(diǎn)
range.deleteContents();//清除內(nèi)容
優(yōu)化上述代碼：
var sel = window.getSelection();
var range = sel.getRangeAt(0)//選擇第一選區(qū)
range.deleteContents();//清除選區(qū)內(nèi)容
var img = new Image();
range.collapse(false);//對于IE來說，參數(shù)不可省略
img.src="smile.gif"http://創(chuàng)建圖片節(jié)點(diǎn)
range.insertNode(node);//插入到該選區(qū)
完整代碼
function insertImg(src) {
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var img = new Image();
range.deleteContents()
img.src=src;
range.insertNode(img);
range.collapse(false);//對于IE來說搁吓，參數(shù)不可省略
}
}
IE怎么辦原茅？
function insertImg(src) {
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var img = new Image();
range.deleteContents()
img.src=src;
range.insertNode(img);
range.collapse(false);//對于IE來說，參數(shù)不可省略
}else if ('selection' in document) {
content.focus();
var range = document.selection.createRange();
range.pasteHTML('<img src="' + src + '"> ');//插入文本堕仔，則range.text="xxx"即可
content.focus();//IE 11模擬的IE5~IE8無須這一步也能獲得焦點(diǎn)
}
}
//content為我的輸入框id
表情包去哪找擂橘？如果碰到這個(gè)問題，這篇文章就不要看了
人生異常短暫
