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的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数