解决安卓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>

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

H5开发app解决输入文本时，软键盘遮盖掉页面
首先我们要清楚输入时候触发软键盘的时候我们触发了什么事件,是调整浏览器窗口的大小时的resize事件我们知道了触发了什么事件就好办了,我们做一个监听这个事件的方法就好以下是范例代码,使用了jq的r ...
android 键盘遮盖输入框_Android软键盘遮住输入框的解决方法终极适配
新的一周,新的开始迎接新的挑战.今天简单介绍一下Android输入框被软键盘遮住的两种常用方法. 法一:清单文件对要进行设置的Activity属性配置android:windowSoftInputMo ...
安卓输入法弹出后css横屏,mui开发安卓端，输入法软键盘导致css横屏样式判断触发...
mui开发安卓端,输入法软键盘导致css横屏样式判断触发 mui开发安卓端,输入法软键盘导致css横屏样式判断触发 css 横屏媒体查询 @media screen and (orientation: ...
input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题 $(document).ready(function() { va ...
h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题参考文章: (1)如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 (2)https://ww ...
flutter TextField 输入框被软键盘挡住的解决方案
flutter TextField 输入框被软键盘挡住的解决方案参考文章: (1)flutter TextField 输入框被软键盘挡住的解决方案 (2)https://www.cnblogs.co ...
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
Uniapp（H5）判断软键盘是否唤起、关闭事件
记录一下每次因为软键盘弹起,而导致我们写的代码样式变形,或者出现一些其它的BUG性问题,此时都要根据是否软键盘弹出,去做相对应的判断,此篇文章就是判断软键盘是否弹起的一些代码记录,好了接下来进入正题 ...

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

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

最新文章

热门文章