300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 手机网页 输入时 软键盘盖住输入框完整解决方案 兼容安卓 鸿蒙 苹果IOS

手机网页 输入时 软键盘盖住输入框完整解决方案 兼容安卓 鸿蒙 苹果IOS

时间:2020-03-09 23:26:51

相关推荐

手机网页 输入时 软键盘盖住输入框完整解决方案 兼容安卓 鸿蒙 苹果IOS

手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果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);}};//

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。