1. 背景:
底部输入框采用fixed定位后,在iPhone13这种有底部安全区的手机上,键盘弹出时被遮挡,在安卓机上是正常的。
![小程序 输入框被键盘挡住,前端,JavaScript,微信小程序,微信小程序,ios,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/07/531626-1.png)
2. 查找问题:
看了网上的解决方案说设置“adjust-position”,试了一下没效果,本来现在这个属性也是默认为true的,看网上另一个解决方案就是判断键盘弹出时,手动改变bottom值,实测是可以的
3. 解决方案关键代码
<template>
<view class="page">
<view class="footer footer-space" :style="{bottom: `${keyboardHeight}px`}">
<input
v-model="commentInput"
:adjust-position="false"
placeholder="输入"
></input>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyboardHeight: 0, // 键盘高度
}
},
onLoad() {
let iphoneSafeHeight = 0 // ios安全区高度
//获取屏幕信息
uni.getSystemInfo({
success(res) {
iphoneSafeHeight = res.screenHeight - res.safeArea.bottom
}
})
// 监听键盘变化
uni.onKeyboardHeightChange(res => {
this.keyboardHeight = res.height > 0 ? res.height - iphoneSafeHeight : res.height // 有安全区时需要减去该高度,不然还是会被挡住
})
}
}
</script>
<style lang="scss" scoped>
.footer {
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
border-top: 2rpx solid rgba(0,0,0,0.1);
padding: 20rpx 28rpx;
width: 100%;
box-sizing: border-box;
font-size: 28rpx;
background: #fff;
}
.footer-space {
padding-bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom) !important; /* 兼容 iOS >= 11.2 */
}
</style>
4. 思考:
input的“adjust-position”属性没用的原因,应该是我包多了一层div,定位的实际是footer层了。文章来源:https://www.toymoban.com/news/detail-531626.html
解决方案中说需要加:adjust-position="false",感觉也应该是不用的吧?在安卓上测了下不用是没问题,ios就待测试了;自己没有用iPhone,验证的时候就有点麻烦。文章来源地址https://www.toymoban.com/news/detail-531626.html
到了这里,关于iOS微信小程序键盘弹出时输入框被挡住的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!