码迷,mamicode.com
首页 > Web开发 > 详细

jquery.emoji.js

时间:2019-10-21 19:17:33      阅读:309      评论:0      收藏:0      [点我收藏+]

标签: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();

  

jquery.emoji.js

标签:mat   hold   row   title   put   style   $1   ons   event   

原文地址:https://www.cnblogs.com/qing1304197382/p/11715280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!