小程序怎么让Input输入框跟随软键盘弹起

1、翻阅微信小程序官方文档，可以发现使用一个属性可以设置：

2、cursor-spacing：指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离（单位为px或者rpx，默认为px）

3、好了，现在知道是通过什么来设置了。下面我们来看一下具体怎么操吧。

1、cursor-spacing='{{xxx}}' 可配置动态值，也可以固定。具体代码如下：

2、其中，我将input的cursor-spacing设置为15，那么如果input框距离底部的距离为20的话，那光标与键盘的距离就是15，如果input框距离底部的距离为10的话，那光标与键盘的距离就是10.总之，就是两者之间取最小值。

取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

3、因此，一般来说，我们可以将对应input的cursor-spacing设置为140到180之间，这样弹出软键盘之后，input框就不会被遮挡住了，不多说，上代码。

4、<div class="moment-detail__input"

v-if="isShowInput"

:style="{'bottom': keyBoardHeight}">

<div class="bg">

<i class='icon icon-edit-group-notice'></i>

</div>

<input

type="text"

:focus='isShowInput'

:placeholder="placeholder"

:adjust-position="false"

@blur="hideInput"

@confirm='send'

@focus="testFocus"

cursor-spacing="150"

v-model="value"

confirm-type="send"

placeholder-style="placeholder">

<div class="moment-detail__input__btn-send" @tap="send">

发送

</div>

</div>

5、Input是这样的，那么对应的另一中输入框textarea其实也是一样的