资讯专栏INFORMATION COLUMN

仿微信在对话框文字中插入Emoji表情包

LiangJ / 2653人阅读

摘要:一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。

场景

类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑.

问题

Emoji表情在页面中其实是GIF格式的IMG标签.如果直接在innerHTML中改变,会导致表情包只出现在文本最后,所以这样是不符合用户体验的,需要跟踪光标的位置.在用户点击文本或者文本框失去焦点时候保存光标位置,点击表情时在光标最后位置插入.
div.innerHTML +=

思路

1.webkit内核的浏览器中可以直接使用getSelection()获取selection对象.以及其中的range对象

range(范围)指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围
var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);

在div的onclick以及onblur事件中绑定保存光标位置

saveSelection() {
    this.lastEditRange = window.getSelection().getRangeAt(0);
}

2.在添加表情事件触发时,首先检查是否存在光标位置,如果存在则在最后位置插入,不存在就在文本末尾插入

   // 判断是否有最后光标对象存在
        if (this.lastEditRange) {
            // 存在最后光标对象,选定对象清除所有光标并添加最后光标还原之前的状态
            selection.removeAllRanges()
            selection.addRange(this.lastEditRange)
        }

3.最后就是对光标位置的处理

   // 如果是文本节点则先获取光标对象
            var range = selection.getRangeAt(0)
            // 获取光标对象的范围界定对象,一般就是textNode对象
            var frag;
            if (range.createContextualFragment) {
                frag = range.createContextualFragment(emojiInput);
            } else {
                var container = document.createElement("div");
                container.innerHTML = emojiInput;
                frag = document.createDocumentFragment();
                var child;
                var title;
                for (; child = container.firstChild;) {
                    title = frag.appendChild(child);
                }
            }
            var node = frag.lastChild;
            range.insertNode(frag);
            range.setStartAfter(node);
            selection.removeAllRanges();
            selection.addRange(range);

4.最后还是要保存一次光标位置.

效果展示

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96903.html

相关文章

  • Android实用库和项目 - 收藏集 - 掘金

    摘要:高仿微信融云版掘金一简述本项目由个人独立开发。项目博客地址高仿微信融云版项目源码地址码云最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。 Android 高仿微信图片查看花式效果 - Android - 掘金图片查看器,为各位追求用户体验的daLao提供更优质的服务 它能够 1、点击图片时以一种无缝顺畅的动画切换到图片查看的界面,同样以一种无缝顺畅的动画退出图片查看界...

    darkbaby123 评论0 收藏0
  • android 仿微信表情雨下落!

    摘要:文章链接众所周知,微信聊天中我们输入一些关键词会有表情雨下落,比如输入生日快乐么么哒会有相应的蛋糕亲吻的表情雨下落,今天就来完成这个表情雨下落的效果。 文章链接:https://mp.weixin.qq.com/s/yQXn-YjEFSW1X7A7CcuaVg 众所周知,微信聊天中我们输入一些关键词会有表情雨下落,比如输入「生日快乐」「么么哒」会有相应的蛋糕、亲吻的表情雨下落,今天就...

    SHERlocked93 评论0 收藏0
  • Android 开发,你遇上 Emoji 头疼吗?

    摘要:由于其表达情绪的特点,被广受欢迎。的国际标准在年出台,现在已经是版本了,而在年,将发布之后会重命名为,其实就是的升级版版本的标准。截止到现在,中,被列入的已经有个了。目前官方使用的是字体文件,后面会详细讲解到。从左到右,分别是默认的显示 showImg(https://segmentfault.com/img/remote/1460000012635919?w=900&h=500); ...

    Meils 评论0 收藏0
  • 代码 - 收藏集 - 掘金

    摘要:行代码的人脸识别实践产品掘金前言很多人都认为人脸识别是一项非常难以实现的工作,看到名字就害怕,然后心怀忐忑到网上一搜,看到网上页的教程立马就放弃了。掘金最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。 安卓第三方登录之微信登录(图文详解) - Android - 掘金一、创建应用并成为开发者 1、创建应用 1)到微信开放平台管理中心,点击创建移动应用 ... 三步实现...

    neuSnail 评论0 收藏0
  • 程序员鱼皮 表情网站项目学习

    摘要:我们可以来看看数据库这个字段就是判断我们的这条数据是否是有效的,表示这条数据是有效的,表示这条数据是无效的。 ? 技术栈 后端 Java 8开发框架:SpringB...

    Yangder 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<