当前位置: 首页 > 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)})

相关文章:

  • 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)详解
  • 特朗普说克里米亚将留在俄罗斯,泽连斯基:绝不承认
  • 俄总统助理:普京与美特使讨论了恢复俄乌直接谈判的可能性
  • A股三大股指涨跌互现,电力股走强,地产股冲高回落
  • 长三角数智文化产业基金意向签约会成功举办
  • 央行25日开展6000亿元MLF操作,期限为1年期
  • 全品系停货?泸州老窖:暂未接到通知,常规调控手段