一、媒介：混合开发中碰到一个题目，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才气漏出来，影响用户体验 二、办理办法:1.ios和android手机唤起的windows变乱不一样，要分别处置惩罚 2.document.body.scrollTop无效，可以用document.documentElement.scrollTop更换 三、详细实现过程：[code]// 判定手机 - ios/andriod function isIOS() { const u = navigator.userAgent; return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 } /** * @description: 键盘弹起，输入框被遮挡 */ function judgeInput() { if (isIOS()) { window.addEventListener('focusin', function () { console.log(1+document.activeElement.tagName); if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { setTimeout(function () { document.documentElement.scrollTop = document.body.scrollHeight; }, 0); } }); } else { window.addEventListener('resize', function () { console.log(2+ document.activeElement.tagName); if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { setTimeout(function () { document.activeElement.scrollIntoView(); }, 0); } }); } } export { isIOS, judgeInput }[/code]铛铛铛，实现啦，用的时候直接调用judgeInput()就行 到此这篇关于HTML5键盘弹起遮挡输入框的办理方法的文章就介绍到这了,更多相干h5键盘弹起遮挡输入框内容请搜索脚本之家以前的文章或继续欣赏下面的相干文章，希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/920471.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-1 21:26 , Processed in 0.026913 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
