内容简介：在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并选择上屏》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
