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

van-field组件设置为textarea属性被软键盘遮挡问题

在移动端van-field 输入框当type为text时,调出软键盘输入框会被顶上去,但type为textarea时不会被顶上去,可以用下面方法来实现:

1. 来2个van-field  type为text的输入框z-index: 1   type为textarea的输入框z-index: 9999,确保多行输入框遮盖住单行输入框

            <div class="input-wrapper"><van-fieldref="fieldRef"v-model="invalidDesc":autofocus="true"type="text"rows="8"autosizeclass="fee-textarea"placeholder="请输入施工过程及所需资金"name="radio"@focus="onFocus"@blur="onBlur"/><van-fieldref="fieldRef2"v-model="orderDesc"label-width="100%"label=""class="largeWidth fee-textarea-2"type="textarea"placeholder="请输入施工过程及所需资金"/></div>
.input-wrapper {position: relative;height: 220px;.fee-textarea {position: absolute;top: 0;z-index: 1;}.fee-textarea-2 {position: absolute;top: 0;z-index: 99999;height: 100%;}
}

2. 当调出软键盘时,先给type为text的输入框上焦点,让其顶上去,然后再给type为textarea的输入框上焦点

  nextTick(() => {fieldRef.value.focus()setTimeout(() => {fieldRef2.value.focus()}, 200)})

http://www.xdnf.cn/news/1898.html

相关文章:

  • Linux下编译MNN
  • Java—ThreadLocal底层实现原理
  • uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
  • 将AAB转APK的两种好用方法AAB to APK Converter
  • 深入理解Java基本类型
  • 软考-软件设计师中级备考 1、计算机内数据的表示
  • 软件编程命名规范
  • Linux 官方蓝牙协议栈 BlueZ 第一篇:入门与架构概览
  • Fanotify学习
  • 基于深度学习的视频目标跟踪算法研究
  • Android 9.0上开发的,如果设置没启动wifi的话,安卓app如何启动wifi
  • cmake 执行命令
  • 《Java编程思想》读书笔记:第十章 内部类
  • vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
  • 生物医药行业中的APS计划排产系统:关键功能与应用
  • 微型计算机原理与接口技术第六版第四章课后习题答案-周荷琴,冯焕清-中国科学技术大学出版社
  • 12个HPC教程汇总!从入门到实战,覆盖分子模拟/材料计算/生物信息分析等多个领域
  • 深入剖析 Vue 双向数据绑定机制 —— 从响应式原理到 v-model 实现全解析
  • Cocos学习之资源动态加载
  • Nacos简介—2.Nacos的原理简介
  • 精益数据分析(22/126):解锁创业增长密码与长漏斗分析
  • 基于springboot的在线教育系统
  • 清理HiNas(海纳斯) Docker日志并限制日志大小
  • MoE架构解析:如何用“分治”思想打造高效大模型?
  • shell脚本3
  • 关于位运算的一些小记
  • 计算机基础 原码反码补码问题
  • exec和spawn
  • CSRF请求伪造
  • Pycharm(三):梯度下降法