在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没有使用外带的表情库。

  在input输入框里面添加上键盘自带表情符后,发送给后台服务器会显示服务异常,网上有给出解决方法,表情编码是16进制的,而我们用的是8进制的于是报错。将表情符转码成就能够ok。代码如下:

  

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;
                    // 转换算法
                    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输入框含有键盘自带的表情符时显示异常的更多相关文章

  1. 移动端页面input输入框被键盘遮挡问题

    <body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> ...

  2. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  3. 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  4. 苹果微信input输入框被键盘遮挡

    最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...

  5. 微信H5页面 会被软键盘顶起来

    问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...

  6. H5页面移动端IOS键盘收起焦点错位

    出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...

  7. H5页面关于android软键盘弹出顶起底部元素的解决方案

    应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...

  8. iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)

    ios的hybird APP 无法使用focus()获取焦点和键盘的问题. 解决方案 原来,在App的配置文件(config.xml),里面默认会有一句 1 <preference name=& ...

  9. 安卓微信端打开H5页面背景图被键盘挤压移动位置解决

    问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...

随机推荐

  1. scanf连续输入字符,中间不要忘记\n

    #include <stdio.h> int main(void) { int precipitating; int temperature; printf("\nInput p ...

  2. .net webapi跨域方法整理

    方法一 在Web.Config里面加上了配置信息: <httpProtocol> <customHeaders> <add name="Access-Contr ...

  3. 我的代码-cleaning

    # coding: utf-8 # In[18]: import pandas as pdimport numpy as npfrom sklearn import treefrom sklearn. ...

  4. CDI的分析

    CDI是一组服务,它们一起使用,使开发人员可以轻松地在Web应用程序中使用企业bean和JavaServer Faces技术.CDI设计用于有状态对象,还有许多更广泛的用途,允许开发人员以松散耦合但类 ...

  5. kvm创建新虚拟机

    安装图形化管理界面yum install virt-manager -y 安装好之后 新建虚拟机,我使用的方法是使用ISO镜像文件安装 选择镜像 设置内存 如此,一步一步走下去即可,不再截图 创建好之 ...

  6. 算法分析(2)——大O和大Θ

    当一个软件遇到了性能瓶颈时,首要的改进是软件功能重构,适当删除可能拖垮系统的业务需求.客户对“实时”相当感兴趣,然而又有几个使用者能够真正清楚什么地方应该是实时的?这一点同样体现在其它行业,生厂商想要 ...

  7. sql job定时备份数据库

    ---------------------------------------- 对TestDB1进行备份 ---------------------------------------- decla ...

  8. Scrapy实战篇(二)之爬取链家网成交房源数据(下)

    在上一小节中,我们已经提取到了房源的具体信息,这一节中,我们主要是对提取到的数据进行后续的处理,以及进行相关的设置. 数据处理 我们这里以把数据存储到mongo数据库为例.编写pipelines.py ...

  9. note 2 运算符和表达式

    运算符 +.-.*./ %求余Modulus **指数Exponent 表达式 #C = 5/9 (F - 32) print 5.0/9*(75-32) 自动类型转换 类型相同,结果类型不变 1/2 ...

  10. python:数据类型dict

    一.字典 key -->value 储存大量数据,而且是关系型数据,查询速度非常快 数据类型分类: 可变数据类型:list , dict, set 不可变的数据类型:int , bool, st ...