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


效果的话如图

contenteditable H5聊天室发送表情(2023.09.27更新)_第1张图片contenteditable H5聊天室发送表情(2023.09.27更新)_第2张图片

 同时还兼顾了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

你可能感兴趣的:(Vue,javascript,vue)