解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题是这样的 input 获取焦点时会自动调起手机键盘，设置 :adjust-position=“true”，会导致键盘弹起时页面整体上移，这篇文章主要介绍了解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题

input 获取焦点时会自动调起手机键盘，设置:adjust-position=“true”，会导致键盘弹起时页面整体上移

设置使键盘弹起使页面不上移
设置输入框所在盒子为绝对定位
键盘弹起时获取键盘高度
设置输入框所在盒子的 bottom 的键盘高度

  <input
   class="TUI-message-input-area"
    :adjust-position="false"  // 修改为 false，使键盘弹起页面不上移
    cursor-spacing="20"
    v-model="inputText"
    @input="onInputValueChange"
    maxlength="140"
    type="text"
    placeholder-class="input-placeholder"
    placeholder="说点什么呢~"
    @focus="inputBindFocus" // 添加获取焦点键盘弹起事件
    @blur="inputBindBlur" // 添加失去焦点键盘隐藏事件
    
/>
 inputBindFocus(e) {
        // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
        // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
        this.$emit('changeBottomVal',  e.detail.height + 'px')
    },
    
    inputBindBlur() {
        // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
        this.$emit('changeBottomVal', 0)
    }
	CSS 
	.message-input {
    flex-shrink: 0;
    width: 100%;
    position: absolute; // input 所在盒子设置绝对定位
    left: 0;
    bottom: 0; // 默认 0
    z-index: 199;
}

文章来源地址https://www.toymoban.com/news/detail-751675.html

到了这里，关于解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！