HTML5键盘弹起遮挡输入框的解决方法

ID:16219 / 打印

一、前言:

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

二、解决办法:

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

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

三、具体实现过程:

// 判断手机 - 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 }

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

上一篇: html5 video标签controlslist的具体使用
下一篇: Html5页面跳转小程序的三种方式

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。