在做一个关于新闻的评论功能的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. PTA——组合数

    PTA 7-48 求组合数 #include<stdio.h> double fact(int n); int main() { int m,n; int c; scanf("% ...

  2. Java_集合_ArrayLish Comparator比较排序 小笔记

    import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; class Teacher ...

  3. web前端3.0时代,“程序猿”如何“渡劫升仙”?

    世界上目前已经有超过18亿的网站.其中只有不到2亿的网站是活跃的.且每天都有几千个新网站不断被创造出来. 2017年成果显著,网络上出现了像Vue这样的新JavaScript框架:基于用户体验流程的开 ...

  4. because there was insufficient free space available after evicting expired cache entries

    Tomcat运行的时候哗哗哗的报警告 版本是Tomcat 8.5.15 告警信息关键字如下 because there was insufficient free space available af ...

  5. Linux内核原理第八次作业

    Linux内核如何装载和启动一个可执行程序 一.ELF可执行文件格式 ELF格式分类: 可重定位文件:用来和其他object文件一起创建可执行文件和共享文件 可执行文件:指出应该从哪里开始执行 共享文 ...

  6. Jenkins 配置 FindBugs,Checkstyle,PMD 实现代码的静态检查 (14)

    一.插件介绍 FindBugs:静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.利用这个工具,就可以在不实际运行程序的情况对软件进行分析.它可以帮助改进代码的 ...

  7. 域名到站点的负载均衡技术一览(主要是探讨一台Nginx抵御大并发的解决方案)(转)https://www.cnblogs.com/EasonJim/p/7823410.html

    一.问题域 Nginx.LVS.Keepalived.F5.DNS轮询,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器,扩充系统的性能 ...

  8. 装完Centos7提示Initial setup of CentOS Linux 7 (core)

    在用U盘装完CentOS后,重新开机启动后显示: Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License inf ...

  9. DotNetBar创建的Ribbon、标签式多文档界面

    1.创建一个form作为主窗体,继承自:DevComponents.DotNetBar.RibbonForm 设置属性:IsMdiContainer为true 2.创建一个form,作为子窗体,也继承 ...

  10. https://api.highcharts.com/gantt/

    <a href="https://api.highcharts.com/gantt/">https://api.highcharts.com/gantt/</a& ...