当前位置: 首页 > news >正文

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

效果展示

键盘未弹起时
在这里插入图片描述
键盘弹起后:
在这里插入图片描述

实现方式

话就不多说了 我直接贴代码了
原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以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事件的输入框会被展示在手机屏幕中间靠上的位置,而一般的键盘高度不会高于手机屏幕的一半,如果追求细节的话可以去改改那个计算公式就可以。

http://www.lryc.cn/news/121058.html

相关文章:

  • excel将主信息和明细信息整理为多对多(每隔几行空白如何填充)
  • 卷积神经网络实现彩色图像分类 - P2
  • 【博客694】k8s kubelet 状态更新机制
  • 【博客692】grafana如何解决step动态变化时可能出现range duration小于step
  • eNSP:ibgp的破水平切割练习
  • maven是什么?安装+配置
  • 基于长短期神经网络LSTM的多分类代码
  • 利用爬虫爬取图片并保存
  • 设计模式之Bridge模式的C++实现
  • springboot异步任务
  • Flutter父宽度自适应子控件的宽度
  • 什么是 API 安全?学习如何防止攻击和保护数据
  • 简述 TCP 和 UDP 的区别以及优缺点和使用场景?
  • react进阶
  • 使用windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】
  • 科技感响应式管理系统后台登录页ui设计html模板
  • Lombok的使用及注解含义
  • 实时通信应用的开发:Vue.js、Spring Boot 和 WebSocket 整合实践
  • 【C++】C++异常
  • 学生成绩管理系统V2.0
  • 【C++】开源:tinyxml2解析库配置使用
  • 如何使用webpack打包一个库library,使用webpack打包sdk.
  • 项目一:基于stm32的阿里云智慧消防监控系统
  • 【果树农药喷洒机器人】Part6:基于深度相机与分割掩膜的果树冠层体积探测方法
  • 打印1到最大的n位数
  • 设计模式行为型——状态模式
  • ElastAlert通过飞书机器人发送报警通知
  • 恒温碗语音芯片,具备数码管驱动与温度传感算法,WT2003H-B012
  • 新能源汽车需要检测哪些项目
  • VR内容定制 | VR内容中控管理平台可以带来哪些价值?