在textarea里输入:弹出emoji并选择上屏

内容简介：在textarea里输入:弹出emoji并选择上屏

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

先上图看看效果

引入依赖

这个功能用的是 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': ':grinning:'},
    {'name': 'Grinning Face With Smiling Eyes', 'emoji': ':grin:'},
    {'name': 'Face With Tears of Joy', 'emoji': ':joy:'},
    {'name': 'Rolling on the Floor Laughing', 'emoji': ''},
    {'name': 'Smiling Face With Open Mouth', 'emoji': ':smiley:'},
    {'name': 'Smiling Face With Open Mouth & Smiling Eyes', 'emoji': ':smile:'},
    {'name': 'Smiling Face With Open Mouth & Cold Sweat', 'emoji': ':sweat_smile:'},
    {'name': 'Winking Face', 'emoji': ':wink:'},
    {'name': 'Smiling Face With Smiling Eyes', 'emoji': ':blush:'},
    {'name': 'Face Savouring Delicious Food', 'emoji': ':yum:'},
    {'name': 'Smiling Face With Sunglasses', 'emoji': ':sunglasses:'},
    {'name': 'Smiling Face With Heart-Eyes', 'emoji': ':heart_eyes:'},
    {'name': 'Face Blowing a Kiss', 'emoji': ':kissing_heart:'},
    {'name': 'Kissing Face', 'emoji': ':kissing:'},
    {'name': 'Kissing Face With Smiling Eyes', 'emoji': ':kissing_smiling_eyes:'},
    {'name': 'Kissing Face With Closed Eyes', 'emoji': ':kissing_closed_eyes:'},
    {'name': 'Smiling Face', 'emoji': ':relaxed:'},
    {'name': 'Slightly Smiling Face', 'emoji': ''},
    {'name': 'Hugging Face', 'emoji': ''},
    {'name': 'Thinking Face', 'emoji': ''},
    {'name': 'Neutral Face', 'emoji': ':neutral_face:'},
    {'name': 'Expressionless Face', 'emoji': ':expressionless:'},
    {'name': 'Face Without Mouth', 'emoji': ':no_mouth:'},
    {'name': 'Face With Rolling Eyes', 'emoji': ''},
    {'name': 'Smirking Face', 'emoji': ':smirk:'},
    {'name': 'Persevering Face', 'emoji': ':persevere:'},
    {'name': 'Disappointed but Relieved Face', 'emoji': ':disappointed_relieved:'},
    {'name': 'Face With Open Mouth', 'emoji': ':open_mouth:'},
    {'name': 'Zipper-Mouth Face', 'emoji': ''},
    {'name': 'Hushed Face', 'emoji': ':hushed:'},
    {'name': 'Sleepy Face', 'emoji': ':sleepy:'},
    {'name': 'Tired Face', 'emoji': ':tired_face:'},
    {'name': 'Sleeping Face', 'emoji': ':sleeping:'},
    {'name': 'Relieved Face', 'emoji': ':relieved:'},
  ],
  displayTpl: function (data) {
    return '<li>' + data.emoji + ' ' + data.name + "</li>";
  },
  insertTpl: function (data) {
    return data.emoji;
  }
});

本文相关代码来自pybbs

以上所述就是小编给大家介绍的《在textarea里输入:弹出emoji并选择上屏》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码
• Android输入系统（一）输入事件传递流程和InputManagerService的诞生
• Android输入系统（四）输入事件是如何分发到目标窗口的？
• Android输入系统（二）IMS的启动过程和输入事件的处理
• GO随笔-表单输入
• Java输入输出挂

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。