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

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.dtcms.com/a/155638.html

相关文章:

  • Qt基础009(HTTP编程和QJSON)
  • Linux阻塞与非阻塞I/O:从原理到实践详解
  • js中get,set用法
  • 深度学习 视觉处理(CNN) day_02
  • 力扣-206.反转链表
  • SecMulti-RAG:兼顾数据安全与智能检索的多源RAG框架,为企业构建不泄密的智能搜索引擎
  • 在 Spring Boot 项目中如何使用索引来优化 SQL 查询?
  • 再见,物理删除!MyBatis-Plus @TableLogic 优雅实现逻辑删除
  • 【ESP32S3】 下载时遇到 libusb_open() failed 解决方案
  • python如何取消word中的缩进
  • Unity3D IK解算器技术分析
  • 基于AIGC的3D场景生成实战:从文本描述到虚拟世界构建
  • BT150-ASEMI机器人率器件专用BT150
  • OceanBase 跻身 Forrester 三大领域代表厂商,全面支撑AI场景
  • 【C++游戏引擎开发】第24篇:级联阴影映射(CSM,Cascaded Shadow Maps)
  • springboot3 声明式 HTTP 接口
  • HTML 地理定位(Geolocation)教程
  • hadoop-3.3.5.tar.gz 镜像
  • OpenHarmony之电源模式定制开发指导
  • 策略模式(Strategy Pattern)详解
  • 2、Ubuntu 环境下安装RabbitMQ
  • 【高频考点精讲】前端构建工具对比:Webpack、Vite、Rollup和Parcel
  • 内联函数(c++)
  • 【FastJSON】的parse与parseObject
  • Oracle for Linux安装和配置(11)——Oracle安装和配置
  • 基于STM32、HAL库的MAX31865模数转换器ADC驱动程序设计
  • 嵌入式 C 语言面试核心知识点全面解析:基础语法、运算符与实战技巧
  • c++之网络编程
  • 立创商城、云汉芯城、亿配芯城均启用DeepSeek AI 大模型赋能电子元器件采购平台
  • 第十四届蓝桥杯刷题——day20