自定义可存数据的jquery 表情输入框

jquery 表情输入框，可存数据库

前两天优化博客的时候，想在留言评论版块插入表情输入功能，并且用户能够存入数据库，并且可以在前台读取展示，于是研究了一下表情包，解决方法如下：

• 下载表情包gif图
  我下载的是新浪的表情包并且编译如下：
  
  image.png

• 表情路径和表情内容结合整理

 var faceList=[
            {'title':'微笑','url':'weixiao.gif'},
            {'title':'嘻嘻','url':'xixi.gif'},
            {'title':'哈哈','url':'haha.gif'},
            {'title':'可爱','url':'keai.gif'},
            {'title':'可怜','url':'kelian.gif'},
            {'title':'挖鼻','url':'wabi.gif'},
            {'title':'吃惊','url':'chijing.gif'},
            {'title':'害羞','url':'haixiu.gif'},
            {'title':'挤眼','url':'jiyan.gif'},
            {'title':'闭嘴','url':'bizui.gif'},
            {'title':'鄙视','url':'bishi.gif'},
            {'title':'爱你','url':'aini.gif'},
            {'title':'泪','url':'lei.gif'},
            {'title':'偷笑','url':'touxiao.gif'},
            {'title':'亲亲','url':'qinqin.gif'},
            {'title':'生病','url':'shengbing.gif'},
            {'title':'太开心','url':'taikaixin.gif'},
            {'title':'白眼','url':'baiyan.gif'},
            {'title':'右哼哼','url':'youhengheng.gif'},
            {'title':'左哼哼','url':'zuohengheng.gif'},
            {'title':'嘘','url':'xu.gif'},
            {'title':'衰','url':'shuai.gif'},
            {'title':'吐','url':'tu.gif'},
            {'title':'哈欠','url':'haqian.gif'},
            {'title':'抱抱','url':'baobao.gif'},
            {'title':'怒','url':'nu.gif'},
            {'title':'疑问','url':'yiwen.gif'},
            {'title':'馋嘴','url':'chanzui.gif'},
            {'title':'拜拜','url':'baibai.gif'},
            {'title':'思考','url':'sikao.gif'},
            {'title':'汗','url':'han.gif'},
            {'title':'困','url':'kun.gif'},
            {'title':'睡','url':'shui.gif'},
            {'title':'钱','url':'qian.gif'},
            {'title':'失望','url':'shiwang.gif'},
            {'title':'酷','url':'ku.gif'},
            {'title':'色','url':'se.gif'},
            {'title':'哼','url':'heng.gif'},
            {'title':'鼓掌','url':'guzhang.gif'},
            {'title':'晕','url':'yun.gif'},
            {'title':'悲伤','url':'beishang.gif'},
            {'title':'抓狂','url':'zhuakuang.gif'},
            {'title':'黑线','url':'heixian.gif'},
            {'title':'阴险','url':'yinxian.gif'},
            {'title':'怒骂','url':'numa.gif'},
            {'title':'互粉','url':'hufen.gif'},
            {'title':'书呆子','url':'shudaizi.gif'},
            {'title':'愤怒','url':'fennu.gif'},
            {'title':'感冒','url':'ganmao.gif'},
            {'title':'心','url':'xin.gif'},
            {'title':'伤心','url':'shangxin.gif'},
            {'title':'猪','url':'zhu.gif'},
            {'title':'熊猫','url':'xiongmao.gif'},
            {'title':'兔子','url':'tuzi.gif'},
            {'title':'OK','url':'ok.gif'},
            {'title':'耶','url':'ye.gif'},
            {'title':'GOOD','url':'good.gif'},
            {'title':'NO','url':'no.gif'},
            {'title':'赞','url':'zan.gif'},
            {'title':'来','url':'lai.gif'},
            {'title':'弱','url':'ruo.gif'},
            {'title':'草泥马','url':'caonima.gif'},
            {'title':'神马','url':'shenma.gif'},
            {'title':'囧','url':'jiong.gif'},
            {'title':'浮云','url':'fuyun.gif'},
            {'title':'给力','url':'geili.gif'},
            {'title':'围观','url':'weiguan.gif'},
            {'title':'威武','url':'weiwu.gif'},
            {'title':'话筒','url':'huatong.gif'},
            {'title':'蜡烛','url':'lazhu.gif'},
            {'title':'蛋糕','url':'dangao.gif'},
            {'title':'发红包','url':'fahongbao.gif'}
        ]

• 页面结构布完整

    

            
            

                

                    sina表情
                
                

                    展示
                
                

                    

                    
                
            
    
    

    

• 给页面表情列表赋值

var self = this;
var html = '';
 for(var i = 0;i'
 }
 $('.face-sina-items').html(html);

• 输入框内展示选择内容：通过点击选择事件获取当前表情包的title 并赋值给到页面的输入框内

  $('.face-sina-item').on('click',function(){
        var title = $(this).data("title");
        var textInner = $('textarea[name="face"]').val();
                textInner+="["+title+"]";
        $('textarea[name="face"]').val(textInner);
 });

image.png

• 数据解析转换成表情包

$('.face-showbtn').on('click',function(){
        var cont =  $('textarea[name="face"]').val();
        var pat01 = /\[[\u4e00-\u9fa5]+\]/g;
        var pat02 = /\[[\u4e00-\u9fa5]+\]/;
        var content = cont.match(pat01);
        var str = cont;
        if(content){
            for(var i=0;i');
            }
        }
        $('.face-show-box').html(str).show();
    })

image.png

• 如需看完整的版本，可以查看源代码 https://github.com/Aimee1608/jqueryEmoji