解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题_uniapp 键盘弹出让页面不动

问题是这样的 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33