<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script?src="jquery-2.1.4.min.js"></script>
????<style>
?.commentBox{
????????????width:700px;
?margin:0?auto;
?position:relative;
?}
????????.commentBox?.textArea{
????????????width:100%;
?min-height:?100px;
?border:1px?solid?#ddd;
?padding:5px;
?line-height:20px;
?word-break:?break-all;
?}
????????.commentBox?.textArea?img{
????????????width:24px;
?height:?24px;
?vertical-align:?bottom;
?}
????????.faceIcon{
????????????margin:10px;
?display:?block;
?width:24px;
?height:?24px;
?background:?url("頭像.png")?no-repeat;
?background-size:?100%;
?}
????????.commentBox?.faceBox{
????????????position:absolute;
?width:410px;
?height:250px;
?padding:10px?5px;
?border:1px?solid?#ddd;
?display:?none;
?background-color:?#fff;
?}
????????.commentBox?.faceBox?img{
????????????width:24px;
?height:24px;
?}
????</style>
</head>
<body>
<div?class="commentBox">
????<div?class="textArea"?contenteditable="true"></div>
????<span?class="faceIcon">點擊選表情</span>
????<div?class="faceBox"></div>
</div>
<script>
?$(function(){
????????for(var?i=0;i<120;i++){
????????????var?imgNum="";
?if(i<10){
????????????????imgNum="00"+i;
?}else?if(i>=10&&i<100){
????????????????imgNum="0"+i;
?}else{
????????????????imgNum=i;
?}
????????????$('<img>').attr('src','123/f_static_'+imgNum+'.png').appendTo($(".faceBox"));
?}
????????$(".faceIcon").on("click",function(){
????????????$(this).parent().find(".faceBox").toggle();
?});
?$(".faceBox").on("click","img",function(){
????????????$(this).parents(".commentBox").find(".textArea").append($(this).clone());
?$(this).parent().hide();
?});
?})
</script>
</body>
</html>
功能待完善（現(xiàn)在只能從編輯框最后加入表情），求幫忙完成效果（可以在光標(biāo)最后離開編輯框的位置加入表情）
qq_sU_4
2017-04-01 15:25:15
