码迷,mamicode.com
首页 > 其他好文 > 详细

在混合开发中软键盘引起的布局问题、input与可编辑DIV兼容性问题汇总

时间:2019-01-31 19:13:33      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:win   文本   回滚   window   scrollto   系统   ted   添加   页面   

此文复现的所有兼容性问题均为以下情况:

1. 腾讯X5内核

2. 全屏webview

 

问题如下:

1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复。

解决方法:添加交互事件,调用本地方法,在键盘收起后执行页面回滚操作。

bridgeClass.jsEventHook.keyboardWillShow = function () {
      // 添加flag 是因为 有多个空时,切换输入框也会调用WillHide
      switchFlag = true;
};

bridgeClass.jsEventHook.keyboardWillHide = function() {
     switchFlag = false;
     setTimeout(() => {
        if (!switchFlag) {
             document.body.scrollTop = 0;
             document.body.style.height = document.body.clientHeight;
        }
     }, 50);
};

 

2. 页面中有多个可编辑DIV时,点击IOS系统中软键盘左上方的上下箭头会导致页面布局错乱

解决方法: 利用样式 user-modify 或者contentEditable,在整体页面中通时只存在一个可编辑DIV,从而变向禁止IOS软键盘的上下箭头。

 

3. 获取可编辑DIV内容时,除获取到所需文本之外,空格可能会被解析为UTF-8, 出现乱码的情况。

解决方法: 使用encodeURI碱性转码,使用decodeURI或者decodeURIComponent获取标签的innerHTML内容并进行解码。(前提需要将多余的标签过滤掉)

 

4. IOS使用中文输入法输入英文时会出现多余的空格,并且出现乱码的情况。

解决方法: 同问题三的解决方法

 

5. 可编辑DIV在IOS中无法通过调用focus使其获取光标

解决方法: 是哦那个window.navigator.userAgent 匹配 Safari 做相应的交互处理

 

未完待续。。。

在混合开发中软键盘引起的布局问题、input与可编辑DIV兼容性问题汇总

标签:win   文本   回滚   window   scrollto   系统   ted   添加   页面   

原文地址:https://www.cnblogs.com/pomelott/p/10343107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!