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

效果展示

键盘未弹起时

键盘弹起后:

实现方式

话就不多说了 我直接贴代码了

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

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

工具类实现

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))) : 0
                that.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标签也相同

wxml 复制代码
<view class="form_warp" style="top: {{keyboard}}px;">
<van-field
    id="name1"
    data-id="name1"
    bind:focus="onFocus"
    bind:blur="onBlur"
    always-embed
    value="{{ 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

wxss 复制代码
.form_warp {
    padding: 30rpx;
    position: relative;
}

JS中实现

紧接着在js中使用工具包

js 复制代码
import deviceUtil from '../../util/device-utils';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 键盘弹起上移距离
    keyboard: 0,

  },

  onFocus(e) {
    //  键盘处理
    deviceUtil.keyboard(this, e)
  },

  onBlur() {
    deviceUtil.closeKeyboard(this)
  },
})

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

相关推荐
丁总学Java3 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域4 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165025 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦12 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac15 小时前
微信小程序的组件
微信小程序
stormjun16 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Mac新人16 小时前
又发现了Mac妙控鼠标的新使用方法
计算机外设
paopaokaka_luck16 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23418 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app