H5页面input输入框含有键盘自带的表情符时显示异常

在做一个关于新闻的评论功能的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;
        } 

 这样评论里就能显示键盘自带表情符啦。。

 希望能给需要的人帮助。如有错误之处,请指正~~~

在移动端中,输入框弹起系统自带键盘时,页面被推上去,此时页面高度发生变化。但是在某些情况下,页面高度变化不触发 resize 事件,导致无法通过 resize 事件来判断键盘的打开和关闭。 解决这个问题的方法是通过监听 window 的 scroll 事件。当键盘弹起时,页面被推上去,导致页面滚动,从而触发 scroll 事件。我们可以通过监听 scroll 事件来判断键盘的打开和关闭。 具体实现方法如下: 1. 在组件中添加一个变量,用于存储键盘是否打开的状态: ``` data() { return { isKeyboardOpen: false } } ``` 2. 监听 window 的 scroll 事件,在事件处理函数中判断页面是否滚动: ``` mounted() { window.addEventListener('scroll', this.handleScroll) }, destroyed() { window.removeEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop if (scrollTop > 0 && !this.isKeyboardOpen) { // 键盘打开 this.isKeyboardOpen = true } else if (scrollTop === 0 && this.isKeyboardOpen) { // 键盘关闭 this.isKeyboardOpen = false } } } ``` 3. 在页面中的输入框上添加聚焦和失焦事件: ``` <input type="text" @focus="handleFocus" @blur="handleBlur"> ``` 4. 在聚焦和失焦事件处理函数中判断输入框是否被聚焦: ``` methods: { handleFocus() { // 输入框聚焦时,认为键盘打开 this.isKeyboardOpen = true }, handleBlur() { // 输入框失焦时,如果页面没有滚动,认为键盘关闭 if (document.documentElement.scrollTop === 0 && document.body.scrollTop === 0) { this.isKeyboardOpen = false } } } ``` 通过以上方法,可以在前端判断用户是否点击了键盘上的关闭按钮。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值