H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没有使用外带的表情库。
在input输入框里面添加上键盘自带表情符后,发送给后台服务器会显示服务异常,网上有给出解决方法,表情编码是16进制的,而我们用的是8进制的于是报错。将表情符转码成就能够ok。代码如下:
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;
// 转换算法
return "&#" + code + ";";
} else {
return char;
}
});
return str;
}
这样就解决了存储问题。
要想成功展示表情符还得转回来。
function entitiestoUtf16(str){
// 检测出形如〹形式的字符串
var strObj=utf16toEntities(str);
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;
}
这样评论里就能显示键盘自带表情符啦。。
希望能给需要的人帮助。如有错误之处,请指正~~~
H5页面input输入框含有键盘自带的表情符时显示异常的更多相关文章
- 移动端页面input输入框被键盘遮挡问题
<body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 苹果微信input输入框被键盘遮挡
最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...
- 微信H5页面 会被软键盘顶起来
问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...
- H5页面移动端IOS键盘收起焦点错位
出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...
- H5页面关于android软键盘弹出顶起底部元素的解决方案
应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...
- iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)
ios的hybird APP 无法使用focus()获取焦点和键盘的问题. 解决方案 原来,在App的配置文件(config.xml),里面默认会有一句 1 <preference name=& ...
- 安卓微信端打开H5页面背景图被键盘挤压移动位置解决
问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...
随机推荐
- Python全栈之路----hash函数
hash函数: 一般翻译为“散列”或“哈希”,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可 ...
- 数组,集合,字符串,bean,map
//[字符串]转成[数组] String[] arr = "1,2,3,4,5,6".split(","); //[String数组]转成[Long数组] Lo ...
- sql语言 含有包含关系的查询 (含mysql 和sql sever)
一.sql中查询包含关系的查询 sql语句中包含关系可以使用 in 和exist,但有些时候仅仅用这两个是不够的,还有表示方法是 not exist(b expect a )可以表示a包含b. 二. ...
- 学习笔记TF017:自然语言处理、RNN、LSTM
自然语言处理 (NLP)问题都是序列化的.前馈神经网络,在单次前馈中对到来数据处理,假定所有输入独立,模式丢失.循环神经网络(recurrent neural network,RNN)对时间显式建模神 ...
- day51 django第二天 django初识
一.模块渲染 jinja2 实现简单的字符串替换(动态页面) 1.下载 pip install jinja2 示例 : html文件中 <!DOCTYPE html> <html ...
- centos7忘记密码处理办法
centos7忘记密码处理办法 此界面按e进入grub编辑界面 进入grub编辑界面.把linux16这行的ro修改为rw init=/sysroot/bin/sh. 按ctrl+x进入单用户模式 登 ...
- centos7 下yum源安装nginx
简单粗暴: .rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noar ...
- Mysql组复制之单主模式(一)
环境 系统:CentOS release 6.9 (Final) Mysql:5.7 机器: S1 10.0.0.7 lemon S2 10.0.0.8 lemon2 S3 10.0.0.9 lemo ...
- 内置---排序(sorted)
# li = [1,23,4,5,6,6,7]# res = sorted(li,reverse=True) #反转后,从小到大 默认从大到小 #res = sorted(li) # print(re ...
- Android App启动速度优化
解决在桌面上点击APP图标后经过一两秒后才显示页面,以及App启动后主界面显示过慢问题 一.应用的启动方式 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会首先会创建一个新的进程分配给该应用 ...