标签：总结 const webivew window H5 问题 JSON input document
-
解决 H5 ios input 聚焦，整个页面被推上去，键盘收起页面未下移bug
方案一： 网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案，并且添加后，所有文件生效~
(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener(
'blur',
event => {
// 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
// input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
if (
document.documentElement.offsetHeight <=
document.documentElement.clientHeight &&
['input', 'textarea'].includes(event.target.localName)
) {
document.body.scrollIntoView() // 回顶部
}
},
true
)
方案二： focusout 含有事件冒泡 blur没有事件冒泡，
特别是对input外面在包含有div时，建议监听focusout事件
export function isMobile() {
const ua = navigator.userAgent;
return /Android|webOS|iPhone|iPod|iPad|Macintosh|BlackBerry/i.test(ua);
}
export function isIos() {
const ua = navigator.userAgent;
return /iPhone|iPod|iPad|Macintosh/i.test(ua);
}
if (isIos()) {
document.body.addEventListener('focusout', () => {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
});
}
在和客户端交互，一般都会处理成JSON字符串，如果此对象里面包含了JOSN字符串时，在处理成JSON字符串，在传输给H5 时，前端拿到解析JSON 就会出错，浏览器，会在传输过程中，去掉一些转译\符号，
解决方法，如果是多层嵌套JSON ，那么就客户端就处理转译JSON几次。
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境
-
webview 里面的H5 ，input 和textarea 等输入框，获取焦点时，滚动相应区域
onFocus={this.onScrollBottom}
onScrollBottom = () => {
if (isIOSApp()) {
const t = document.body.clientHeight;
window.scroll({ top: t, left: 0, behavior: 'smooth' });
}
}
handleScroll = () => {
const contentBox:any = document.getElementById('allContent');
contentBox.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
}
<div className={styles.contentBox}>
<div id={'allContent'}></div>
</div>
<div className={styles.more}>加载更多 <Icon type="down" size={'md'}/></div>
</div>
标签：总结,const,webivew,window,H5,问题,JSON,input,document
来源： https://www.cnblogs.com/tanwanwan2017/p/13236138.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
