jquery.emoji.js
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.emoji.js相关的知识,希望对你有一定的参考价值。
1、引用
<link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.css" /> <link rel="stylesheet" href="/static/plug/jQuery-moji/src/css/jquery.emoji.css"/> <script src="/static/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="/static/js/jquery.mCustomScrollbar.js"></script> <script src="/static/plug/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script> <script src="/static/plug/jQuery-emoji/src/js/jquery.emoji.js"></script>
2、html
<div class="windows_input" id="talkbox"> <div class="input_icon"> <a href="javascript:;"></a> </div> <div class="input_box"> <textarea name="" rows="" cols="" id="input_box"></textarea> <p style="width: 204px;line-height: 50px;float: right;">Ctrl+Enter<button id="send">发送</button></p> </div> </div>
3、初始化
$("#talkbox #input_box").emoji({ button: "#talkbox .input_icon a", showTab: false, animation: ‘slide‘, icons: [{ name: "QQ表情", path: "/static/plug/jQuery-emoji/dist/img/qq/", maxNum: 72, excludeNums: [41, 45, 54], file: ".gif", placeholder: "[qq_{alias}]" }] });
4、发送表情并将代码替换为表情图片
function send(){ var text = document.getElementById(‘input_box‘); var chat = document.getElementById(‘chatbox‘); var btn = document.getElementById(‘send‘); var talk = document.getElementById(‘talkbox‘); btn.onclick=function(){ if(text.value ==‘‘){ alert(‘不能发送空消息‘); }else{ text.value = replace_em(text.value); chat.innerHTML += ‘<li class="me"><p class="time">今天 18:26</p><img src="‘+‘https://tva4.sinaimg.cn/crop.0.0.1080.1080.50/005Sqdykjw8epvbgog754j30u00u0jtt.jpg?KID=imgbed,tva&Expires=1571046485&ssig=3tTYpfvSOI‘+‘" title="刘晴"><span>‘+text.value+‘</span></li>‘; text.value = ‘‘; chat.scrollTop=chat.scrollHeight; }; }; document.onkeyup = function(e){ var e = e || event; if( e.keyCode == 13 && e.ctrlKey ){ if(text.value ==‘‘){ alert(‘不能发送空消息‘); }else{ text.value = replace_em(text.value); chat.innerHTML += ‘<li class="me"><p class="time">今天 18:26</p><img src="‘+‘https://tva4.sinaimg.cn/crop.0.0.1080.1080.50/005Sqdykjw8epvbgog754j30u00u0jtt.jpg?KID=imgbed,tva&Expires=1571046485&ssig=3tTYpfvSOI‘+‘" title="刘晴"><span>‘+text.value+‘</span></li>‘; text.value = ‘‘; chat.scrollTop=chat.scrollHeight; }; } } //表情格式替换 function replace_em(str){ str = str.replace(/</g,‘<‘); str = str.replace(/>/g,‘>‘); str = str.replace(/ /g,‘<br/>‘); str = str.replace(/[qq_([0-9]*)]/g,"<img src=‘/static/plug/jQuery-emoji/dist/img/qq/$1.gif‘ />"); str = str.replace(/[em_([0-9]*)]/g,"<img src=‘/static/plug/jQuery-emoji/dist/img/tieba/$1.jpg‘ />"); str = str.replace(/[other_([0-9]*)]/g,"<img src=‘/static/plug/jQuery-emoji/dist/img/tieba/$1.jpg‘ />"); return str; } }; send();
以上是关于jquery.emoji.js的主要内容,如果未能解决你的问题,请参考以下文章