【引言】

最近写的程序中的某个模块中需要添加一个 Emoji 表情包功能。

我们通过查阅资料得知平时使用的 Unicode 编码中就包含了上千个 Emoji 表情包。

可以通过访问 http://getemoji.com/  来查找自己想要的 Emoji表情。

关于使用的话，它可以有两种使用方式，一种是直接使用10进制( dec )，另一种是使用16进制( hex )。使用方法如下：

 🦁 //10进制方式
 🦁 //16进制方式

这两个都可以正常的显示狮子头 &#129400； 如果我们要更改其大小建议放在 p 标签内，使用 font-size 属性更改其大小。

由于我们是要做一个 Emoji 表情包功能，所以我们得使用较多的表情，所以我做了一个表情选择面板，将选择的表情插入到所输入的文本的最后。

【代码】

我们传统的输入框都是使用 textarea 或者 input 标签来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片（富文本化），我们可以给 div 标签设置 contenteditable="true" 的属性，来让 div 标签实现可以编辑文本的功能。

<div id="messageInput" class="textarea" contenteditable="true"></div>
<aside id="messageFacePacket"></aside>

其中一小部分代码

接下来我们要选择一部分自己想要的 Emoji 表情，通过查表获取其值，最终我选定了从 [ 😃 , 🙄 ]这个闭区间的所有值，即所有表情包。

然后我们遍历这个区间，获得其值，插入到相应的 DOM 节点中。

//获取表情包
function getEmoji(){
        messageFacePacket = "";
        for(i=128512;i<=128580;i++){
              messageFacePacket += "<p>&#"+i+"<span>"+i+"</span></p>";
        }
        document.getElementById("messageFacePacket").innerHTML = messageFacePacket;
}	

其中点击表情那个功能的时候弹出，存在就关闭的代码：

//打开or关闭表情包
openFacePacket = 0;
document.getElementById("openMessageFacePacket").addEventListener('touchend',function(){
	if(openFacePacket == 0){
	        openFacePacket = 1;
		document.getElementById("setStyle_contentMessageFacePacket").style.display = "block";
		document.getElementById("setStyle_contentConversationPageMessage").scrollIntoView();
	}else{
		openFacePacket = 0;
		document.getElementById("setStyle_contentMessageFacePacket").style.display = "none";
		document.getElementById("setStyle_contentConversationPageMessage").scrollIntoView()；
         }	
});

然后我们需要通过自定义响应事件来获取并解析用户的操作：

document.getElementById("messageInput").addEventListener('keyup', function(evt) {
    if (evt.keyCode == 186) { //即;字符
        var doc = evt.target;
        var txt = doc.innerText || doc.textContent
        doc.innerHTML = (txt).replace("&", "&"); //替换操作
        var sel = window.getSelection()
        var range = document.createRange()
        range.setStart(doc, 1);
        range.collapse(true)
        sel.removeAllRanges();
        sel.addRange(range);
    }
});

然后我们使用 CSS 对其进行样式渲染，我们就能得到这个美哒哒的效果啦：

【小结】

无。