【引言】
最近写的程序中的某个模块中需要添加一个 Emoji 表情包功能。
我们通过查阅资料得知平时使用的 Unicode 编码中就包含了上千个 Emoji 表情包。
可以通过访问 http://getemoji.com/ 来查找自己想要的 Emoji表情。
关于使用的话,它可以有两种使用方式,一种是直接使用10进制( dec ),另一种是使用16进制( hex )。使用方法如下:
🦁 //10进制方式
🦁 //16进制方式
这两个都可以正常的显示狮子头 🥸; 如果我们要更改其大小建议放在 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 对其进行样式渲染,我们就能得到这个美哒哒的效果啦:
【小结】
无。