uniapp避坑:关于安卓端输入框中的内容被软键盘顶上去

3,358 阅读1分钟

之前一直没发现这个问题,因为一直用的模拟器在看页面布局。导致后期交给测试的时候,测试用安卓手机一下就看出来了。软键盘一出来,input中的文本就被顶上去了。 1677737424713.png

这里提供两种思路。

第一种:获取软键盘高度,在父盒子中添加style。实时根据软键盘高度调整

html代码

<view class="revoke-box-input" :style="{'padding-bottom':-KeyboardHeight+'px'}">
						<!-- <uni-easyinput v-model="ideaValue" clearable="false"   placeholder="请输入内容"></uni-easyinput> -->
						<input type="text" v-model="ideaValue" @keyboardheightchange="hightchange"  placeholder="请输入内容">
					</view>

image.png

js代码

hightchange(e){
	console.log('键盘变化',e.detail.height);
	this.KeyboardHeight=e.detail.height
},

第二种:上面的方法还是不行的话。可能就是另外一种情况,在父盒子的css中设置了position:flex,导致内容被顶走了,还一直不知道怎么解决。 看了一下自己的代码,给最大的父盒子设置了position:flex。所以出现了这种问题

父盒子css删除position:flex。ok搞定。