收藏
回答

点击input组件弹出键盘,下面的input组件会被挡住,要怎么解决?

小程序新手来问一个问题,就是我弄了个生成随机数的工具,把操作区用position置底了,但是当我在上面两个框输入数字时,键盘弹起来抵到的是当前输入的input组件底端,下面的input组件会被挡住,这样我要在下面的input组件输入时,还要把键盘退出来,重新点进下面的input输入,有没有什么方法可以让键盘弹起来抵到的是操作区的底端,而不是当前input组件的底端?


回答关注问题邀请回答
收藏

4 个回答

  • wang li
    wang li
    2020-05-03

    官方文档有这么一句

    adjust-positionbooleantrue否键盘弹起时,是否自动上推页面

    2020-05-03
    有用 1
    回复
  • 拾忆
    拾忆
    发表于小程序端
    2020-05-03
    可以试试获取键盘高度,然后设置padding
    2020-05-03
    有用 1
    回复
  • ChienchouSu
    ChienchouSu
    2020-05-04

    结合两位大佬的方法,问题解决了,我的步骤如下:

    ① 先在置底操作区的标签上设置样式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: {
        keyboardHeight0
    },
    

    ④ 设置bindfocus事件和bindblur事件

    // input聚焦时,获取键盘高度
    getKeyboardHeight(e) {
        this.setData({
          keyboardHeight: e.detail.height
        })
    },
    // input失焦时,恢复原来位置
    recoverHeight() {
        this.setData({
          keyboardHeight: 0
        })
    }
    

    2020-05-04
    有用 1
    回复
  • 钟海生
    钟海生
    2020-08-31

    设置fixed为true即可。

    

    2020-08-31
    有用
    回复
登录 后发表内容
问题标签