admin管理员组文章数量:1534191
手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果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);
}
};//
版权声明:本文标题:手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果IOS 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726872121a1087963.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论