VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换
第一种：在存取时进行编码：（我本次使用的方式）
存储时编码：emoji_encode
/**对表情转义**/
function emojiEncode(e){var n = /[\ud800-\udbff][\udc00-\udfff]/g;// 检测utf16字符正则return e = e.replace(n, function (e) {var n, r;return 2 === e.length ? (n = e.charCodeAt(0), r = e.charCodeAt(1),"&#" + (1024 * (n - 55296) + 65536 + r - 56320) + ";") : e})
}取数据时解码：
/**对表情解码**/
function emojiDecode(e){var n = /\&#.*?;/g;//获取数据库种16进制的数据//然后进行解码操作return e.replace(n, function (e) {var n, r, t;return 9 == e.length ? (t = parseInt(e.match(/[0-9]+/g)), n = Math.floor((t - 65536) / 1024) + 55296, r = (t - 65536) % 1024 + 56320, unescape("%u" + n.toString(16) + "%u" + r.toString(16))) : e})
}上边两个方法我们是把他们放在了公共js种，可以直接调用，如我们项目中的调用存储编码方法的方式：
初始化时获取数据使解码后的数据回显：
最后回显后的效果如下图：
第二种：在前端编码解决（本方案输入框可以输入存储，但是读取后无法再放入输入框编辑，直接展示没有问题：
在input输入框里面添加上键盘自带表情符后，发送给后台服务器会显示服务异常，网上有给出解决方法，表情编码是16进制的，而我们用的是8进制的所以保存才会报错。将表情符转码成就能够ok：
解决存储问题的方法（即就是把16进制的表情编码转换成文字编码）：
/**表情符号存储与编译**/function utf16toEntities(str) {var patt=/[\ud800-\udbff][\udc00-\udfff]/g;// 检测utf16字符正则str = str.replace(patt, function(char){var H, L, code;if (char.length===2) {H = char.charCodeAt(0);// 取出高位L = char.charCodeAt(1);// 取出低位code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00;// 转换算法var ss = "&#" + code + ";";return ss;} else {return char;}}); str = str.replace(/&#/g,'^^');return str;}解决回显的问题（即把库里的表情数据解码为16进制便于回显）：
/**表情解码**/
function entitiestoUtf16(str){// 检测出形如〹形式的字符串var strObj=utf16toEntities(str);strObj = strObj.replace(/\^\^/g,'&#');var patt = /&#\d+;/g;var H,L,code;var arr = strObj.match(patt)||[];for (var i=0;i<arr.length;i++){code = arr[i];code=code.replace('&#','').replace(';','');// 高位H = Math.floor((code-0x10000) / 0x400)+0xD800;// 低位L = (code - 0x10000) % 0x400 + 0xDC00;code = "&#"+code+";";var s = String.fromCharCode(H,L);strObj.replace(code,s);}return strObj;} VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换相关推荐
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 已解决selenium模块向网页input文本框输入内容失败问题
已解决(selenium向input文本框输入内容失败问题)selenium.common.exceptions.ElementNotInteractableException: Message: e ...
- java 限制文本框长度_java中限制文本框输入长度的显示（转载）
我最近在网上看到一篇文章很不错,对于限制文本框输入长度的显示很方便 JAVA不像C#能够有maxLength这个属性对文本框的输入长度进行控制,但也是有办法实现相应的功能的. 写一个MyDocumen ...
- 简单的文本框输入实时计数
2019独角兽企业重金招聘Python工程师标准>>> 简单的文本框输入实时计数 $(function(){suminput('idea','60');})//记录输入字符方法fun ...
- [正则表达式]文本框输入内容控制
整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n ...
- html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画 动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
- Java集合框架上机练习题：用户分别从两个文本框输入学生的姓名和分数.............
编写一个应用程序,用户分别从两个文本框输入学生的姓名和分数,程序按成绩排序将这些学生的姓名和分数显示在一个文本区中. import java.awt.FlowLayout; import java.a ...
- html未填写提示,文本框输入信息，未输入的文本框会提示输入，并且未输入的文本框会变红...
一 实现分销商注册页面文本框输入错误信息或者不输入会提示错误,填写好的文本框的文本会显示,并且空文本框会变红,输入的错误信息不但文本框变红,里面的文本会变蓝 实现思路:前台输入的信息会传给后台,后台接 ...
- QT限制文本框输入的方法
QT限制文本框输入的方法 界面编程的时候,对文本框的处理往往是个很头疼的事情: 一是焦点进入文本框时,从人性化考虑,应选择文本框中文本,方便输入: 二是,限制文本框的输入,只允许输入有效的文本,如果不 ...
最新文章
- SpringBoot+Mybatis 实现动态数据源切换方案
- python【力扣LeetCode算法题库】19-删除链表的倒数第N个节点
- shell脚本操作mysql数据库，使用mysql的-e参数可以执行各种sql的(创建，删除，增，删，改、查)等各种操作
- Common Subsequence
- Linux网络编程 之 IO多路复用select（八）
- java中JOptionPane类_java：JOptionPane类消息框总结
- 《走遍中国》珍藏版（三）
- delphi5开发人员指南_非设计人员的网页设计开发人员指南
- python获取重定向url_python中检测url重定向到的地址的例子
- 用键盘控制音量的软件
- UIButton 详解
- Serv-U组建个人FTP服务器, ——完全图解教程：FTP架设、端口映射、动态域名申请...
- structs 1.x 学习
- mysql 5.7.16安装与给远程连接权限
- 深入浅出带你了解Python2与Python3的异同
- SpringBoot yml文件命名规则
- java取万位的值,Excel中表格数值进行取万位整数的操作方法
- Python 爬取懂车帝详情页“全部车型模块信息”！懂车帝就火起来了吗？
- Java设计模式七大原则（3）
- 怎么把图片转换成Tikz图片