php文本框添加表情,仿微信在对话框文字中插入Emoji表情包

场景

类似于微信聊天的一个对话框,要求可以使用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.最后还是要保存一次光标位置.

效果展示

php文本框添加表情,仿微信在对话框文字中插入Emoji表情包相关推荐

linux版微信能发表情包的,仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
在博客中插入emoji表情
在博客Markdown编辑器中插入emoji表情? 利用三种不同方法在博客.网页.markdown编辑器中插入emoji表情.? 在写博客时,经常希望能够用一些表情表达自己想法,但是默认的markdo ...
markdown中插入emoji表情方法总结，让你尽情使用表情符号
想在markdown中插入emoji表情符号,经过测试发现,在 Typora 和 CSDN的markdown编辑器下,都支持插入部分表情符号. 将插入emoji表情的方法进行总结,以方便后续使用. 各 ...
mysql 不支持表情符号_mysql中插入emoji表情失败的原因与解决
失败场景用户昵称中存在emoji表情,调用jdbc往mysql数据库插入的时候抛出异常 java.sql.SQLException: Incorrect string value: '\xF0\x9 ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...
typora中插入emoji表情
访问emoji官网,里面是所有的emoji表情随便选择一个表情,比如:活动-奖牌奖杯-金牌.有三种方式可以在typora里面插入
html在input中加超链接,如何给文本框添加超链接
任务流程第一步明确任务目标第二步明确任务内容第三步根据辅导资料完成相应学习第四步完成任务第五步复习(任务/课程) 任务目标在PowerPoint中给文字添加超链接后,文字下面会有 ...
PHP处理微信中带Emoji表情的消息发送和接收(Unicode字符转码编码)
在进行微信公众号开发者接入的时候,与用户的对话互动中,涉及到的文本信息不仅仅是文字那么简单,其中可能还会包含着各种表情字符,例如「emoji表情」. 百科: Emoji 由于微信接口中对于emoji ...

php文本框添加表情,仿微信在对话框文字中插入Emoji表情包

php文本框添加表情,仿微信在对话框文字中插入Emoji表情包相关推荐

最新文章

热门文章