uni-app ios端app input设置adjust-position="false"仍然会上推页面且失去焦点后页面受键盘高度影响变形

uni-app ios端app input设置adjust-position="false"仍然会上推页面且失去焦点后页面受键盘高度影响变形

操作步骤：

<div class="inputBox" >  
    <input class="input" :adjust-position="false"  type="text"/>  
    <div class="send">  
        <text class="sendText">发送</text>  
    </div>  
</div>  
.inputBox {  
    /* #ifndef APP-PLUS */  
    display: flex;  
    /* #endif */  
    /* #ifdef H5 */  
    box-sizing: border-box;  
    /* #endif */  
    flex-direction: row;  
    padding: 10px 20px;  
    height: 56px;  
    align-items: center;  
    justify-content: space-between;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 750upx;  
    background-color: #fff;  
}  
.input {  
    padding: 0 20px;  
    background-color: #F0F0F0;  
    height: 33px;  
    line-height: 33px;  
    color: #666666;  
    font-size: 14px;  
    border-radius: 18px;  
    flex: 1;  
    text-align: left;  
}



### 预期结果：

键盘弹起时不上推页面  键盘收起后 页面不变形

实际结果：

键盘弹起时上推页面 键盘收起后 页面变形



### bug描述：

当 input 位于页面底部时  点击输入框 键盘弹起后 会上推页面 :adjust-position="false" 此属性设置并不生效 并且 输入框失去焦点后键盘收起 页面高度 会被刚才的键盘高度顶上去 下面出现空白
开发环境 版本号 项目创建方式
Windows win10 HBuilderX

579673eddcf237db079912d3ffea4dca.zip


更多关于uni-app ios端app input设置adjust-position="false"仍然会上推页面且失去焦点后页面受键盘高度影响变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios端app input设置adjust-position="false"仍然会上推页面且失去焦点后页面受键盘高度影响变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS端常见的键盘适配问题。在uni-app中，即使设置了adjust-position="false"，iOS系统本身的行为仍可能导致页面被键盘推起。

建议尝试以下解决方案：

  1. 使用cursor-spacing属性：
<input class="input" :adjust-position="false" cursor-spacing="0" type="text"/>
  1. 监听键盘事件手动控制布局：
// 在页面中监听键盘事件
onLoad() {
    uni.onKeyboardHeightChange(res => {
        if (res.height === 0) {
            // 键盘收起时恢复布局
            this.restoreLayout()
        }
    })
}
回到顶部