H5页面收回键盘后留空白区域问题解决

2020-02-25  本文已影响0人  小小小小的人头

IOS端H5页面关闭软键盘-底部会留下空白页;
这个问题在ios12以上系统出现
猜测原因:在微信webview打开我们h5页面的时候,就固定了页面的高度,如果这个input在页面的底部,当呼出软键盘时,由于高度问题,整个webview会被键盘顶上去,而取消时没有恢复原状。

image.png
解决办法:

绑定一个blur事件,当其触发时,使scrollTo为0

<TextInput  onBlur={() => { this.inputBlur }}>


inputBlur() {
         // 解决 IOS收回键盘失去焦点时键盘区域留白
         let u = navigator.userAgent;
         let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
         if (isiOS) {
             window.scroll(0, 0);
         }
     }

就搞定啦~

上一篇 下一篇

猜你喜欢

热点阅读