小程序新手来问一个问题,就是我弄了个生成随机数的工具,把操作区用position置底了,但是当我在上面两个框输入数字时,键盘弹起来抵到的是当前输入的input组件底端,下面的input组件会被挡住,这样我要在下面的input组件输入时,还要把键盘退出来,重新点进下面的input输入,有没有什么方法可以让键盘弹起来抵到的是操作区的底端,而不是当前input组件的底端?
小程序新手来问一个问题,就是我弄了个生成随机数的工具,把操作区用position置底了,但是当我在上面两个框输入数字时,键盘弹起来抵到的是当前输入的input组件底端,下面的input组件会被挡住,这样我要在下面的input组件输入时,还要把键盘退出来,重新点进下面的input输入,有没有什么方法可以让键盘弹起来抵到的是操作区的底端,而不是当前input组件的底端?
4 个回答
官方文档有这么一句
adjust-positionbooleantrue否键盘弹起时,是否自动上推页面
结合两位大佬的方法,问题解决了,我的步骤如下:
① 先在置底操作区的标签上设置样式padding-bottom,用键盘的高度顶起操作区
<view class="handle_area" style="padding-bottom:{{keyboardHeight}}px"> <input>...</input> </view>
② 在input上设置adjust-position为false取消键盘上推页面,设置bindfocus事件获取键盘高度,设置bindblur事件返回原来的位置
<input adjust-position="{{false}}" bindfocus="getKeyboardHeight" bindblur="recoverHeight"></input>
③ 在js的data中设置键盘高度值keyboardHeight
data: { keyboardHeight: 0 },
④ 设置bindfocus事件和bindblur事件
// input聚焦时,获取键盘高度 getKeyboardHeight(e) { this.setData({ keyboardHeight: e.detail.height }) }, // input失焦时,恢复原来位置 recoverHeight() { this.setData({ keyboardHeight: 0 }) }
设置fixed为true即可。