h5键盘弹起遮挡输入框的处理_h5页面 输入法挡住了输入框-CSDN博客

[xiaodongxier]

最新推荐文章于 2023-11-02 15:07:24 发布

猿如意
于 2023-04-26 14:54:39 发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

一、前言：

混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验

二、解决办法:

1.ios和android手机唤起的windows事件不一样，要分别处理

2.document.body.scrollTop无效，可以用document.documentElement.scrollTop替换

三、具体实现过程：

const u = navigator.userAgent;return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); window.addEventListener('focusin', function () {console.log(1+document.activeElement.tagName);document.activeElement.tagName === 'INPUT' ||document.activeElement.tagName === 'TEXTAREA'document.documentElement.scrollTop = document.body.scrollHeight;window.addEventListener('resize', function () {console.log(2+ document.activeElement.tagName);document.activeElement.tagName === 'INPUT' ||document.activeElement.tagName === 'TEXTAREA'document.activeElement.scrollIntoView();

 铛铛铛，实现啦，用的时候直接调用judgeInput()就行