HTML5键盘弹起遮挡输入框的解决方法
发布时间:2024-01-03 15:42:30 作者:猿如意 我要评论
混合开发中遇到一个问题,有些型号的安卓机和ios机型,输入框唤起键盘后,输入框会被键盘遮挡,需要手动滑动才能漏出来,影响用户体验,今天给大家分享HTML5键盘弹起遮挡输入框的解决方法,感兴趣的朋友一起看看吧
一、前言:
混合开发中遇到一个问题,有些型号的安卓机和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键盘弹起遮挡输入框的解决方法的文章就介绍到这了,更多相关h5键盘弹起遮挡输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
HTML5中input输入框默认提示文字向左向右移动的示例代码
这篇文章主要介绍了HTML5中input输入框默认提示文字向左向右移动,本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-10- 这篇文章主要介绍了HTML5输入框下拉菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-08
- 这篇文章主要介绍了AmazeUI在模态框中嵌入表单形成模态输入框,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-08-20
- 这篇文章主要介绍了AmazeUI 输入框组的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2020-08-14
- 这篇文章主要介绍了html5实现输入框fixed定位在屏幕最底部兼容性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2020-07-03
HTML5去掉输入框type为number时的上下箭头的实现方法
这篇文章主要介绍了HTML5去掉输入框type为number时的上下箭头的实现方法,需要的朋友可以参考下2020-01-03Html5新标签datalist实现输入框与后台数据库数据的动态匹配
HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发2017-05-18- 本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面跟着小编一起来看下吧2017-02-14
- 本文给大家介绍如何使用html5为输入框添加语音输入功能,实现方法很简单,需要的朋友参考下本文2017-02-06
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android
本篇文章主要介绍了移动端HTML5页面端去掉input输入框的白色背景和边框,非常具有实用价值,需要的朋友可以参考下。2016-12-15
最新评论