100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 解决安卓H5输入框获取焦点软键盘页弹起 页面高度被压缩问题

解决安卓H5输入框获取焦点软键盘页弹起 页面高度被压缩问题

时间:2022-08-23 13:22:32

相关推荐

解决安卓H5输入框获取焦点软键盘页弹起 页面高度被压缩问题

在移动项目开发中经常会遇到输入框获取焦点软键盘页弹起,页面高度被压缩,输入框获取焦点时弹不上去的问题,我本次的是vue的UI框架(vux)

解决办法如下代码:

只要在页面初始化完成的时候,获取屏幕的可视化高度,并将获得的可视化高度赋值给.flex就OK了

<template><div class="flex"><div class="flex-form"><group><x-inputstyle="text"title="姓名"placeholder="请填写真实姓名"></x-input></group><group><x-inputstyle="text"title="微信号"placeholder="请填写微信号以便联系"></x-input></group><group><x-inputstyle="tel"title="电话"placeholder="请填写真实电话"></x-input></group><group class="textarea"><x-textareatitle="收货地址"placeholder="地址详细至:省/市/区/街道":show-counter="false":rows="1"autosize></x-textarea></group><span class="submit">提交</span></div></div></template><script>export default {created() {// 获取.flex的可视区域的高let flexheight = document.documentElement.clientHeight;// 在页面整体加载完毕时window.onload = () => {// 把获取到的高赋值给.flexdocument.getElementByclassName('flex').style.height = `${flexheight}px`;};},};</script>

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