微信小程序中键盘弹起输入框自动跳到键盘上方处理

效果展示

键盘未弹起时

键盘弹起后：

实现方式

话就不多说了 我直接贴代码了
原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2，然后设成负值，再将这个值给到最外层相对定位的盒子的top属性，这样就不会出现顶部导航上移的问题了具体实现如下：

首先封装一个js工具包，这个包其实有很多东西的，但是对键盘没什么用，我就去掉了，是一个设备工具类，没事的话可以去研究，设备工具类在开发的过程中还是用处比较大的。

工具类实现

/*** 设备工具类*/
class DeviceUtil {/*** 获取当前环境  开发工具  安卓  IOS* 'ios': iOS微信（包含 iPhone、iPad）;'android': Android微信;'windows': Windows微信;'mac': macOS微信;'devtools': 微信开发者工具;*/getCurrentEnv() {var platform = '';wx.getSystemInfo({success(res) {platform = res.platform}})console.log(platform);return platform;}/*** 获取设备的屏幕高度*/getDeviceHeight() {var screenHeight = '';wx.getSystemInfo({success: (res) => {screenHeight = res.windowHeight}});return screenHeight;}/*** 监听点击输入框页面弹起事件* 使用说明：* 该方法对IOS上的 <vant-field type="textarea" /> 会有显示不全的问题 不建议在textarea上使用* * @param {当前页面指向} that * @param {点击事件参数} e */keyboard(that, e) {// 获取屏幕高度var height = this.getDeviceHeight();// 仅在手机上使用此函数if (this.getCurrentEnv() == 'android' || this.getCurrentEnv() == 'ios') {that.setData({keyboard: 0})// 创建一个选择器查询对象const query = wx.createSelectorQuery();// 选择要获取的元素query.select('#' + e.currentTarget.dataset.id).boundingClientRect(function (rect) {// 获取元素的位置和尺寸等信息var top = (-(rect.bottom - (height / 2))) < 0 ? (-(rect.bottom - (height / 2))) : 0that.setData({keyboard: top})}).exec();}}/*** 关闭键盘* @param {*} that */closeKeyboard(that) {if (this.getCurrentEnv() == 'android' || this.getCurrentEnv() == 'ios') {that.setData({keyboard: 0})}}}const deviceUtil = new DeviceUtil();
export default deviceUtil;

WXML中为元素添加属性

紧接着在wxml文件中需要给vant-field标签添加一些属性，input标签也相同

<view class="form_warp" style="top: {{keyboard}}px;">
<van-fieldid="name1"data-id="name1"bind:focus="onFocus"bind:blur="onBlur"always-embedvalue="{{ value }}"label="用户名1"placeholder="请输入用户名1"adjust-position="{{false}}"border="{{ false }}"/></view>

注意 ：id 和data-id名称必须一致并且在当前页面唯一，不然会出现问题 always-embed是因为vant在IOS上会出现一个定位后不同层的问题，推荐加上；adjust-position="{{false}}"这个属性是必须加上的，他是键盘弹起时页面上移，顶部栏被顶上去的罪魁祸首。
不要忘记在最外层的盒子上添加这个属性style="top: {{keyboard}}px;"

WXSS

.form_warp {padding: 30rpx;position: relative;
}

JS中实现

紧接着在js中使用工具包

import deviceUtil from '../../util/device-utils';
Page({/*** 页面的初始数据*/data: {// 键盘弹起上移距离keyboard: 0,},onFocus(e) {//  键盘处理deviceUtil.keyboard(this, e)},onBlur() {deviceUtil.closeKeyboard(this)},
})

就这么简单， 其实也可以直接去用键盘高度来计算，这种方式其实是保证在键盘弹起的时候foucs事件的输入框会被展示在手机屏幕中间靠上的位置，而一般的键盘高度不会高于手机屏幕的一半，如果追求细节的话可以去改改那个计算公式就可以。