手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果IOS
当点击输入框时调起软盘,安卓和IOS会有所不同,IOS中弹起软盘会让整体布局往上移,而安卓不会而是整体布局高度缩减了。
参考了2篇文章
文章1:
移动端键盘挡住输入框_chueluo0880的博客-CSDN博客
文章2:
移动端软盘遮盖输入框的解决方案_Zdde_的博客-CSDN博客_移动端软键盘遮挡输入框
他们的思路大致是一致的,我这里采用了文章1的思路;大致思路如下:
解决思路与实现
步骤1:打开页面后,先获取当前窗体高度
var winHeight = window.innerHeight; // 获取当前页面高度
步骤2:声明一个全局dom变量,来存储当前获取光标的输入框id
我这里给了一个默认值
var indexDomId='name';//当前DomID
步骤3:输入框dom绑定获取光标事件,并传当前输入框的ID值
html代码
<el-form-item label="姓名" prop="Name"><el-input v-model="UserApplyForm.Name" id="Name" @focus="Domonfocus('Name')"></el-input></el-form-item>
JS代码:用来缓存输入框ID
function Domonfocus(name){console.log(name)indexDomId=name;},
步骤4:监听窗口尺寸改变
window.onresize = function(){//监听到窗口大小改变后执行相关业务};//
步骤5:监听到窗口尺寸改变后,延时500毫秒后让窗体滚动到光标所在位置
这里说下为什么500毫秒后再执行
因为需要等待【步骤3】的业务执行完成
window.onresize = function(){//获取窗体改变后的高度var onresizeH=window.innerHeight;//页面打开时的高度“减去”窗体改变后的高度var _h=winHeight - resizeHeight;if (_h>50){// 软键盘弹出-----等待500毫秒后,滚动至光标所在位置setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);} else {//软键盘收起-----等待500毫秒后,滚动至光标所在位置setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);}};//