标签: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