收藏
回答

input组件中adjust-position="{{ false }}"不生效,只复现于安卓手机。

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 微信安卓客户端 8.0.6 2.18.1

问题:为了解决input框聚焦后上移问题,设置了adjust-position="{{ false }}" ,通过top:-{{top}}px"自行判断是否上移整个页面。

但安卓机设置了adjust-position="{{ false }}" 以后,仍然会导致input框上移

代码片段:https://developers.weixin.qq.com/s/SbemRZmQ77rD

正常键盘没弹起情况下如图:: 键盘弹起情况下如图-出现输入框上移



代码如下——————

wmxl文件:

<view class="bg" style="padding:0rpx; position: relative; top:-{{top}}px">

  <view class="header"></view>

  <view class="basicBox">

    <view class="mainInfo">基本信息</view>

    <view class="photoPannel">

      <view class="photoLeft">

        <view class="item">

          <input bindinput="bindNameInput" class="value1" value="{{visitor}}" disabled="{{!editFlag}}"

            placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的姓名"

            id="input1" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" />

        </view>

        <view class="item">

          <view class="line1"></view>

          <input id="input2" bindinput="bindPhoneInput" class="value1" value="{{visitorPhone}}" disabled="{{!editFlag}}"

            placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入您的手机号"

            type="number" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" />

        </view>

        <view class="item">

          <view class="line1"></view>

          <view class="key" style="width: 32%;">您的性别</view>

          <view class="value" style="width:44%;margin-left:30rpx;">

            <picker class="picker"style="width:90%" bindchange="bindGenderChange" disabled="{{!editFlag}}" value="{{genderIndex}}"

              range="{{arrayGender}}">

              <view>{{arrayGender[genderIndex]}}</view>

            </picker>

            <image class="right" src="../../images/arrow.png"></image>

          </view>

        </view>

      </view>

      <view class="photoBox" bind:tap="uploadPicture">

        <image src="{{imageCode}}" mode="aspectFill"style=" width: 210rpx;height: 280rpx;"></image>

        <canvas canvas-id="compressCanvasId"

        style="width:300px;height:300px;position: absolute;left:-350px;top:-350px"></canvas>

      </view>

    </view>


    <view class="item">

      <view class="line1"></view>

      <view class="key">您的公司</view>

      <input id="input3" bindinput="bindCompanyInput" class="value" value="{{company}}" disabled="{{!editFlag}}"

        placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的公司"

        adjust-position="{{ false }}" />

    </view>

    <view class="item">

      <view class="line"></view>

      <view class="key">访问时间</view>

      <view class="value">

        <picker class="picker" mode="multiSelector" bindchange="bindStartMultiChange"

          bindcolumnchange="bindTimeColumnChange" value="{{multiStartIndex}}" disabled="{{!editFlag}}"

          range="{{multiTimeArray}}">

          <view class="zan-field__input zan-cell__bd">{{multiStartTime}}</view>

        </picker>

        <image class="right" src="../../images/arrow.png"></image>

      </view>

    </view>

    <view class="item">

      <view class="line"></view>

      <view class="key">离开时间</view>

      <view class="value">

        <picker class="picker" mode="multiSelector" bindchange="bindEndMultiChange"

          bindcolumnchange="bindTimeColumnChange" value="{{multiEndIndex}}" disabled="{{!editFlag}}"

          range="{{multiTimeArray}}">

          <view class="zan-field__input zan-cell__bd">{{multiEndTime}}</view>

        </picker>

        <image class="right" src="../../images/arrow.png"></image>

      </view>

    </view>

    <view class="item">

      <view class="line"></view>

      <view class="key">访问事项</view>

      <input id="input4" bindinput="bindTitleInput" class="value" value="{{title}}" disabled="{{!editFlag}}"

        placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入访问事项"

        adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" />

    </view>

    <!-- <view class="item">

      <view class="line"></view>

      <view class="key">上传照片</view>

      <view bind:tap="uploadPicture" class="value {{ imageFlag ? '': 'placehoder-font' }}">

        {{ imageFlag ? surfacePicName : imagePhoto }}

      </view>

    

    </view> -->

  </view>

  <view class="leaderInfo">

    <view class="mainInfo">其他信息</view>

    <view class="item">

      <view class="line"></view>

      <view class="key">车牌号</view>

      <input id="input5" bindinput="bindCarNoInput" class="value" value="{{carNo}}" disabled="{{!editFlag}}"

        placeholder-style="font-size:32rpx;color:#BFBFBF;line-height:104rpx;" maxlength="30" placeholder="请输入车牌号"

        adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" />

    </view>

    <view class="item">

      <view class="line"></view>

      <view class="key">员工电话</view>

      <input id="input6" bindinput="bindStaffPhoneInput" class="value" value="{{staffPhone}}" disabled="{{!editFlag}}"

        placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入员工电话"

        type="number" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" />

    </view>

    <view class="item">

      <view class="line"></view>

      <view class="key">同行人</view>

      <view class="value">否</view>

    </view>

  </view>

  <view wx:if="{{buttonFlag=='1'}}" class="button-area">

    <view class="submit_bottom" bindtap="submit">提交</view>

  </view>

  <view wx:if="{{buttonFlag=='2'}}" class="button-area">

    <view class="submit_bottom" bindtap="recall">召回</view>

  </view>

</view>


js文件:

 //输入框上移

  inputFocus(e) {

    console.log('focus', e)

    const keyboradHeight = e.detail.height

    const id = e.currentTarget.id

    this.createSelectorQuery()

      .select(`#${id}`)

      .boundingClientRect(rect => {

        console.log('==> rect', rect)

        console.log('hegiht', this.data.height)

        const bottom = this.data.height - rect.bottom

        console.log('bottom', bottom)

        console.log('keyboradHeight', keyboradHeight)

        if (bottom > keyboradHeight) {

          // 距离足够, 不需要上移

          this.setData({

            top: 0

          })

          console.log('不需要')

        } else {

          console.log('需要')

          this.setData({

            top: keyboradHeight - bottom

          })

        }

      }).exec()

  },

  inputBlur(e) {

    this.setData({ top: 0 })

  },

最后一次编辑于  2021-07-22
回答关注问题邀请回答
收藏

1 个回答

  • LDjin
    LDjin
    2021-11-25

    我也遇到了相同的问题

    2021-11-25
    有用
    回复
登录 后发表内容