contenteditable H5聊天室发送表情（2023.09.27更新）

遇到个需求是在H5页面聊天室中可以发送表情，普通的发送信息已经做过了是借助的websocket，发表情类似于QQ微信那样，既需要展示在输入框中，又需要发送给后台，回显到聊天室让大家都看到，这个还是需要仔细考虑考虑的。

涉及到的功能点有以下几个：

1.仿照qq微信，输入框中要回显文字和表情，支持删除和插入。

2.输入框右侧有个表情按钮，点击按钮底部弹出表情区域，点击可以插入到“输入框”的光标位置。

3.输入框的高度有一定限制，超出后滚动。

对应的解决方案：

1.这里用普通的input或其他是显示不了表情的，需要借助div的contenteditable属性，经查证qq空间的动态也是用的这个，表情有两种方案：1.选用emoji表情，优点是全世界通用，无需解析使用简单，适配性强，缺点是个性化不高，观赏度不强。2.自己制定系统内的表情规则，比如动态解析展示，所谓的表情其实是图片，优点是可以DIY表情，可以根据自己项目风格设计，缺点是每次展示都需要解析，而且要处理删除逻辑等。在此选用方案1。

2.功能简单

3.功能简单

（2023.09.27补充）本文后续有更新，考虑到顺便记录解题过程，之前文章内容就暂不更改了，新增内容以追加方式由分割线显示，想要最终结果的直接翻到页面底部即可

技术栈vue2，核心代码参考如下：

// @/components/input.vue

// index.vue

效果的话如图

 同时还兼顾了pc端的查看（细心的可以看到代码中有个变量isPc，就是判断pc端还是移动端的，pc端有滚动条，所以表情的大小稍微缩小留出滚动条位置）

因为是从整个项目中剥离出来的核心代码，可能有没见过的变量等，如果还有疑问可以留言。

再放一个emoji资源网址： Smileys & People Emoji Meanings

--------------------------------------------------2023年9月27日更新-------------------------------------------

在使用过程中，也发现了一些问题，比如安卓手机上正常，到ios手机上会出现输入中文会导致连续添加两遍到输入框、删除出现异常等现象。

更新的核心代码如下：

// @/components/input.vue

// index.vue

参考资料：

Vue使用Emoji表情_清新小伙子的博客-CSDN博客_vue使用emoji

https://www.jb51.net/article/246976.htm

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作_千拾的博客-CSDN博客_contenteditable 获取光标位置

https://www.jianshu.com/p/a026014012e2