标签:mat hold row title put style $1 ons event
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(/\n/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();
标签:mat hold row title put style $1 ons event
原文地址:https://www.cnblogs.com/qing1304197382/p/11715280.html