功能待完善（现在只能从编辑框最后加入表情），求帮忙完成效果（可以在光标最后离开编辑框的位置加入表情）

<!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>

qq_sU_4

浏览 1548回答 1

功能待完善（现在只能从编辑框最后加入表情），求帮忙完成效果（可以在光标最后离开编辑框的位置加入表情）

1回答