添加、显示表情图片

最新推荐文章于 2021-05-31 00:16:12 发布

羽筠

最新推荐文章于 2021-05-31 00:16:12 发布

阅读量1.4k

点赞数

分类专栏： HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/50956723

版权

HTML + CSS + JS 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

添加和展示表情图片

资源下载地址：http://download.csdn.net/detail/qq_16494241/9469511

代码：

155行会有报错，按下面替换下

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>添加显示表情</title>
<style type="text/css">
*{ margin:0; padding:0; box-sizing:border-box;}
body{ font-size:14px;}
.msg_box{ padding:20px;}
textarea{ width:100%; height:240px; padding:10px; border:#e1e1e1 solid 1px; outline:none; resize:none;}
/*添加表情 按钮*/
.add_btn{ width:100%; height:30px; line-height:30px; margin-top:10px; text-align:center; color:#fff; background-color:#1375EF; border-radius:5px; cursor:pointer;}
/*显示文本域中内容*/
.show_msg{ width:100%; height:200px; padding:10px; margin-top:20px; line-height:26px; border:#e1e1e1 solid 1px; background-color:#efefef; overflow-y:auto;}
.show_msg img{ width:24px; vertical-align:middle;}
/*评论表情包*/
.face_box{ width:100%; box-sizing:border-box; padding:1px; background-color:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; position:absolute; left:0; top:320px; display:none;}
.face_box span{ display:block; width:12.5%; height:50px; line-height:50px; text-align:center; box-sizing:border-box; border:#e6e6e6 solid 1px; float:left; margin-left:-1px; margin-top:-1px;}
.face_box img{ width:24px; vertical-align:middle;}
</style>
<script type="text/javascript" src="jquery2.1.js"></script>
</head>

<body>

<div class="msg_box">
	<textarea id="msg_text" name=""></textarea>
    <div class="add_btn">添加表情</div>
    <!--显示文本域中内容-->
    <div class="show_msg"></div>
</div>



<script>
//添加表情
$('body').on('click','.add_btn',function(){
	if(!$(this).find('.face_box').html()){
		var faceHtml = addFaceHtml();
		$(this).append(faceHtml);
		$('.face_box').height(parseInt($(window).height() - parseInt($('.face_box').css('top'))) - 5);
	}
	$(this).find('.face_box').toggle();
});
//选择表情加入输入框
$('body').on('click','.face_box span',function(){
	var text_area = $('.msg_box').find('textarea').attr('id');
	insertAtCursor(document.getElementById(text_area), faceHtmlArr[$(this).attr('data-num')].phrase);
	//显示输入的内容
	$('.show_msg').html(faceToHtml($('.msg_box').find('textarea').val()));
});
//显示输入的内容
$('.msg_box').find('textarea').bind('input propertychange', function() {
	var set_val = $.trim($(this).val());
	$('.show_msg').html(faceToHtml(set_val));
});






//表情图片路径
var img_src = 'face/';
//生成表情
function addFaceHtml(){
	var faceHtml = '';
	faceHtml += '<div class="face_box">';
	for(f=0;f<faceHtmlArr.length;f++){
		faceHtml += '<span data-num="' + f + '"><img src="' + img_src + faceHtmlArr[f].url +'" /></span>';
	}
	faceHtml += '</div>';
	return faceHtml;
}
//表情对应字符
var faceHtmlArr = [
	{'id':1,'phrase':'[微笑]','url':'1.gif'},{'id':2,'phrase':'[撇嘴]','url':'2.gif'},
	{'id':3,'phrase':'[色]','url':'3.gif'},{'id':4,'phrase':'[发呆]','url':'4.gif'},
	{'id':5,'phrase':'[流泪]','url':'5.gif'},{'id':6,'phrase':'[害羞]','url':'6.gif'},
	{'id':7,'phrase':'[闭嘴]','url':'7.gif'},{'id':8,'phrase':'[睡]','url':'8.gif'},
	{'id':9,'phrase':'[大哭]','url':'9.gif'},{'id':10,'phrase':'[尴尬]','url':'10.gif'},
	{'id':11,'phrase':'[发怒]','url':'11.gif'},{'id':12,'phrase':'[调皮]','url':'12.gif'},
	{'id':13,'phrase':'[呲牙]','url':'13.gif'},{'id':14,'phrase':'[惊讶]','url':'14.gif'},
	{'id':15,'phrase':'[难过]','url':'15.gif'},{'id':16,'phrase':'[冷汗]','url':'16.gif'},
	{'id':17,'phrase':'[抓狂]','url':'17.gif'},{'id':18,'phrase':'[吐]','url':'18.gif'},
	{'id':19,'phrase':'[偷笑]','url':'19.gif'},{'id':20,'phrase':'[可爱]','url':'20.gif'},
	{'id':21,'phrase':'[白眼]','url':'21.gif'},{'id':22,'phrase':'[傲慢]','url':'22.gif'},
	{'id':23,'phrase':'[饥饿]','url':'23.gif'},{'id':24,'phrase':'[困]','url':'24.gif'},
	{'id':25,'phrase':'[惊恐]','url':'25.gif'},{'id':26,'phrase':'[流汗]','url':'26.gif'},
	{'id':27,'phrase':'[憨笑]','url':'27.gif'},{'id':28,'phrase':'[大兵]','url':'28.gif'},
	{'id':29,'phrase':'[奋斗]','url':'29.gif'},{'id':30,'phrase':'[咒骂]','url':'30.gif'},
	{'id':31,'phrase':'[疑问]','url':'31.gif'},{'id':32,'phrase':'[嘘]','url':'32.gif'},
	{'id':33,'phrase':'[晕]','url':'33.gif'},{'id':34,'phrase':'[折磨]','url':'34.gif'},
	{'id':35,'phrase':'[衰]','url':'35.gif'},{'id':36,'phrase':'[敲打]','url':'36.gif'},
	{'id':37,'phrase':'[再见]','url':'37.gif'},{'id':38,'phrase':'[擦汗]','url':'38.gif'},
	{'id':39,'phrase':'[抠鼻]','url':'39.gif'},{'id':40,'phrase':'[糗大了]','url':'40.gif'},
	{'id':41,'phrase':'[坏笑]','url':'41.gif'},{'id':42,'phrase':'[左哼哼]','url':'42.gif'},
	{'id':43,'phrase':'[右哼哼]','url':'43.gif'},{'id':44,'phrase':'[哈欠]','url':'44.gif'},
	{'id':45,'phrase':'[鄙视]','url':'45.gif'},{'id':46,'phrase':'[委屈]','url':'46.gif'},
	{'id':47,'phrase':'[快哭了]','url':'47.gif'},{'id':48,'phrase':'[阴险]','url':'48.gif'},
	{'id':49,'phrase':'[亲亲]','url':'49.gif'},{'id':50,'phrase':'[吓]','url':'50.gif'},
	{'id':51,'phrase':'[可怜]','url':'51.gif'},{'id':52,'phrase':'[拥抱]','url':'52.gif'},
	{'id':53,'phrase':'[月亮]','url':'53.gif'},{'id':54,'phrase':'[太阳]','url':'54.gif'},
	{'id':55,'phrase':'[炸弹]','url':'55.gif'},{'id':56,'phrase':'[骷髅]','url':'56.gif'},
	{'id':57,'phrase':'[菜刀]','url':'57.gif'},{'id':58,'phrase':'[猪头]','url':'58.gif'},
	{'id':59,'phrase':'[西瓜]','url':'59.gif'},{'id':60,'phrase':'[咖啡]','url':'60.gif'},				
	{'id':61,'phrase':'[饭]','url':'61.gif'},{'id':62,'phrase':'[爱心]','url':'62.gif'},
	{'id':63,'phrase':'[强]','url':'63.gif'},{'id':64,'phrase':'[弱]','url':'64.gif'},
	{'id':65,'phrase':'[握手]','url':'65.gif'},{'id':66,'phrase':'[胜利]','url':'66.gif'},
	{'id':67,'phrase':'[抱拳]','url':'67.gif'},{'id':68,'phrase':'[勾引]','url':'68.gif'},
	{'id':69,'phrase':'[OK]','url':'69.gif'},{'id':70,'phrase':'[NO]','url':'70.gif'},
	{'id':71,'phrase':'[玫瑰]','url':'71.gif'},{'id':72,'phrase':'[凋谢]','url':'72.gif'},
	{'id':73,'phrase':'[示爱]','url':'73.gif'},{'id':74,'phrase':'[爱情]','url':'74.gif'},
	{'id':75,'phrase':'[飞吻]','url':'75.gif'}
];
//在光标处加入内容
function insertAtCursor(myField, myValue) { 
	//IE support 
	if (document.selection) { 
		myField.focus(); 
		sel = document.selection.createRange(); 
		sel.text = myValue; 
		sel.select(); 
	} 
	//MOZILLA/NETSCAPE support 
	else if (myField.selectionStart || myField.selectionStart == '0') { 
		var startPos = myField.selectionStart; 
		var endPos = myField.selectionEnd; 
		// save scrollTop before insert 
		var restoreTop = myField.scrollTop; 
		myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos,myField.value.length); 
		if (restoreTop > 0) { 
			// restore previous scrollTop 
			myField.scrollTop = restoreTop; 
		} 
		myField.focus(); 
		myField.selectionStart = startPos + myValue.length; 
		myField.selectionEnd = startPos + myValue.length; 
	} else { 
		myField.value += myValue; 
		myField.focus(); 
	} 
} 
//在文本中显示表情
function faceToHtml(rContent) {
	rContent = rContent.replace(/</g,'<'); 
    rContent = rContent.replace(/>/g,'>'); 
    rContent = rContent.replace(/\n/g,'<br/>'); 
	var regx = /(\[[\u4e00-\u9fa5]*\w*\]){1}/g;
	//正则查找“[]”格式
	var rs = rContent.match(regx);
	if(rs) {
		for( i = 0; i < rs.length; i++) {
			for( n = 0; n < faceHtmlArr.length; n++) {
				if(faceHtmlArr[n].phrase == rs[i]) {
					var t = '<img src="' + img_src + faceHtmlArr[n].url + '" />';
					rContent = rContent.replace(rs[i], t);
					break;
				}
			}
		}
	}
	return rContent;
}
//alert(faceToHtml('《<dsfdsfdas>dfdsf[微笑]da'));
</script>
</body>
</html>

羽筠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
添加、显示表情图片

添加和展示表情图片资源下载地址：http://download.csdn.net/detail/qq_16494241/9469511代码：添加显示表情*{ margin:0; padding:0; box-sizing:border-box;}body{ font-size:14px;}.msg_box{ padding:20px;}textar
复制链接

扫一扫