问题:为了解决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 })
},
我也遇到了相同的问题