用github的issues回复的时候,可以直接输入:就会自动弹出emoji,可以选择并上屏,非常的方便,网上找了一下,大都是用图片实现的,这不是我想要的,本来emoji就是一个字符,而且各个平台都支持,那为啥不直接输入emoji呢?不用图片替换可以吗?然后折腾了一下,实现了!!

先上图看看效果

emoji.gif

引入依赖

这个功能用的是at.js实现的, at.js又依赖Caret.js, 所以两个js都要引入

另外还有at.js的css文件也要引入

下面我用的是bootcdn的链接,你可以用自己的链接

<link href="//cdn.bootcss.com/at.js/1.5.3/css/jquery.atwho.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/Caret.js/0.3.1/jquery.caret.min.js"></script>
<script src="//cdn.bootcss.com/at.js/1.5.3/js/jquery.atwho.min.js"></script>

初始化

就是按照github/wiki上的demo改的,直接拷贝就可以用了

var contentE = $("#content");

contentE.atwho({
  at: ":",
  data: [
    {'name': 'Grinning Face', 'emoji': '😀'},
    {'name': 'Grinning Face With Smiling Eyes', 'emoji': '😁'},
    {'name': 'Face With Tears of Joy', 'emoji': '😂'},
    {'name': 'Rolling on the Floor Laughing', 'emoji': '🤣'},
    {'name': 'Smiling Face With Open Mouth', 'emoji': '😃'},
    {'name': 'Smiling Face With Open Mouth & Smiling Eyes', 'emoji': '😄'},
    {'name': 'Smiling Face With Open Mouth & Cold Sweat', 'emoji': '😅'},
    {'name': 'Winking Face', 'emoji': '😉'},
    {'name': 'Smiling Face With Smiling Eyes', 'emoji': '😊'},
    {'name': 'Face Savouring Delicious Food', 'emoji': '😋'},
    {'name': 'Smiling Face With Sunglasses', 'emoji': '😎'},
    {'name': 'Smiling Face With Heart-Eyes', 'emoji': '😍'},
    {'name': 'Face Blowing a Kiss', 'emoji': '😘'},
    {'name': 'Kissing Face', 'emoji': '😗'},
    {'name': 'Kissing Face With Smiling Eyes', 'emoji': '😙'},
    {'name': 'Kissing Face With Closed Eyes', 'emoji': '😚'},
    {'name': 'Smiling Face', 'emoji': '☺️'},
    {'name': 'Slightly Smiling Face', 'emoji': '🙂'},
    {'name': 'Hugging Face', 'emoji': '🤗'},
    {'name': 'Thinking Face', 'emoji': '🤔'},
    {'name': 'Neutral Face', 'emoji': '😐'},
    {'name': 'Expressionless Face', 'emoji': '😑'},
    {'name': 'Face Without Mouth', 'emoji': '😶'},
    {'name': 'Face With Rolling Eyes', 'emoji': '🙄'},
    {'name': 'Smirking Face', 'emoji': '😏'},
    {'name': 'Persevering Face', 'emoji': '😣'},
    {'name': 'Disappointed but Relieved Face', 'emoji': '😥'},
    {'name': 'Face With Open Mouth', 'emoji': '😮'},
    {'name': 'Zipper-Mouth Face', 'emoji': '🤐'},
    {'name': 'Hushed Face', 'emoji': '😯'},
    {'name': 'Sleepy Face', 'emoji': '😪'},
    {'name': 'Tired Face', 'emoji': '😫'},
    {'name': 'Sleeping Face', 'emoji': '😴'},
    {'name': 'Relieved Face', 'emoji': '😌'},
  ],
  displayTpl: function (data) {
    return '<li>' + data.emoji + ' ' + data.name + "</li>";
  },
  insertTpl: function (data) {
    return data.emoji;
  }
});

本文相关代码来自pybbs

相关链接

原文链接: https://tomoya92.github.io/2017/06/14/textarea-type-emoji-with-at.js/