微信小程序--textarea显示文字至于最顶层, 但是覆盖其他view, 显示未超出

解决微信小程序placeholder文字”悬浮“问题 解决微信小程序placeholder文字”悬浮“问题 小程序wxm真是奇奇怪怪,。。。。方法2简单有效。 方法一: 在弹出层显示时隐藏input或者textarea组件,测试发现只有设置”display:none“才生效,设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏,只不过这些做法都影响布局,不推荐。 后来再想了下,其实可以在隐藏textarea的时候用view来模拟textarea显示内容,这样既不改变布局,也能合理地展示 阅读详情

案例

问题是这样的, 我们想将textarea的高度设定自适应, so, 使用到了auto-height属性, 但是, 这个时候出现了问题, 因为我们最大输入量是1000字, 很容易超出屏幕大小的区域, 这时候textarea显示的内容会覆盖在其他的view之上.

问题:

textarea的view 显示区域正常, 只有文字覆盖在最上层, 如下图
在这里插入图片描述
这个是textarea的问题, 那么 如何解决呢

解决

这时候就需要cover-view替代那些本身需要覆盖在上面的view, 来解决这个问题.

注意

这里需要注意的几点, 是有关css的样式的问题

  1. 原来view的文字居中, cover-view无效, 此时, 需要cover-view的嵌套大发, 就是文字放到cover-view上, 由父级的cover-view让子cover-view居中即可.
  2. cover-view的存在绝对位置的情况下, 也就是position: absolute;, 此时父级的居中无效
  3. cover-view是覆盖在原生标签上的, 还是跳不出导航栏和底边栏.
  4. 看需求吧, 我是感觉cover-view的性能和延展都比较低, 能不用不用, 一旦使用, 需要协调好层级和显示.
微信小程序-input或textarea 里输入的文字或者是placeholder里的值,飘到弹出view上 微信小程序-input或textarea 里输入的文字或者是placeholder里的值,飘到弹出view上        微信小程序中经常会出现: 弹出view,input框文字飘到view上,如下图。            ··········由于textarea是原生组件实现,层级最高,目前还无法支持在上面覆盖元素这样的交互设计。 既然如此 我们就只能----绕着走了。  ... 阅读详情

相关推荐

基于Multisim的智能交通灯控制系统仿真与实现(含动态闪烁功能)

本文详细介绍了基于Multisim的智能交通灯控制系统仿真与实现,重点解析了动态闪烁功能的电路设计。通过555定时器、74LS192计数器和JK触发器等核心模块,实现了主干道与支干道的交替通行及黄灯1Hz闪烁功能,为交通灯控制系统设计提供了完整的仿真方案。

weixin_29174013的博客 425

关于微信开发者工具的窗口导航栏不显示文字,文字与顶部样式重合的解决方案

将"navigationStyle": "custom"和skyline相关的设置删掉后,我的页面也终于正常了。也正是因为导航栏没有正常显示,在wxml中的文字直接跑顶部了。

m0_71388163的博客 4003

uniapp实战:5分钟搞定PDA激光扫码功能(附完整代码)

本文详细介绍了在Uniapp应用中快速集成工业PDA激光扫码功能的实战方案。通过解析PDA硬件扫码与手机摄像头扫码的核心机制差异,提供了完整的广播监听封装类代码,并演示了在Vue页面中的集成使用方法,帮助开发者高效解决仓储、零售等行业的条码扫描需求。

weixin_29239661的博客 456

微信小程序通过cover-view解决textarea层级过高穿透问题

自从做小程序以来,就遇到了好多坑,其中一个就是textarea层级过高,会穿透其他层次,这时候用z-index也是不管用的。 官方是这么说的: 小程序框架为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件,为了能正常覆盖原生组件,设计了cover-view。 所以说用cover-view就可以了,但是在用cover-view的时候也有好多坑,这就导致使用cover-view会不起作用或者cover-view里的组件也不显示了,接下来我就描

weixin_44379204的博客 2606

别再死记硬背MAML原理了!用PyTorch手撸一个Omniglot小样本分类器(附完整代码)

本文详细介绍了如何使用PyTorch实现MAML(模型无关的元学习)算法,构建一个Omniglot小样本分类器。通过实战代码演示,帮助读者理解MAML的双层优化原理,并提供了完整的训练循环、网络架构设计及调试技巧,适合想要掌握元学习技术的开发者。

weixin_29191669的博客 131

World Action Model:经典论文

郑困时,图prorpt为机量人压务时,退过驱制解弱词表(constrsinsd decoding), 强附模型只从.256个者动作token中保H, B象总注活地。始VLA之一,RT-2使用了大量的五联网VQ据与少里的机械网的AcSonDat行CoFine-Tunng, 独组sl, 共i744个episode,Mous使用三个专累模,分是vidogonmedel,actonesget,understandng。包的核定之的的观到沟血黄动作,预之后现(vorlemodel),tseing,2。

u013250861的博客 406

微信小程序顶部文字的设置

如果想顶部的文字不跟着页面改变,或者全局设置顶部文字,需要在app.json文件中设置。如果想单独设置某个页面顶部的文字,需要在对应页面的.json文件中设置。以下是其他一些关于顶部的设置。

Miraitowat的博客 3467

[RAM] DRAM 导论:DDR4 | DDR5 | LPDDR5 | GDRR6 | HBM 应运而生

有数据的地方就有存储, 内存是谁都离不开的产品。而动态随机存取存储器(DRAM)作为一种常见的内存。本博客将介绍DRAM的基本概念、工作原理、优缺点以及应用领域等方面。

串起点滴 3917

小程序使用cover-view和cover-image(图片会被文字覆盖)

通过定位将遮罩的图片铺满video组件,但是产生了以下几个bug: bug1:使用z-index将按钮和标题放在遮罩之上无效 bug2: 编辑器预览正常,但是真机调试后发现图片被cover-view内的标题文字压了下去 在网上大致一搜没有很好的解决方法,cover-view这个组件看来只能够用于一些简单实用的场景,在当前的需求下实现难度很大 <cover-view class="...

hahahhahahahha123456的博客 3748

人工智能技术基础系列之:迁移学习

作者:禅与计算机程序设计艺术 1.背景介绍 随着深度学习和神经网络的快速发展,越来越多的应用场景需要处理大量的数据和复杂的任务。然而,由于计算资源、存储空间等条件的限制,传统的人工智能方法往往不能满足实际需求。因此,为了提高效率和降低成本,研究人员提出了迁移学习的概念。本篇文章将详细介绍迁移学习的基

AI天才研究院 695

一、C++反作弊对抗实战 (基础篇 —— 2.注册表注入DLL)

在Windows NT/XP操作系统中,当需要加载user32.dll的程序启动时,user32.dll会加载注册表键HLM\Software\Microsoft\WindowsNT\CurrentVersion\Windows\AppInit_dlls下面列出的所有模块。

Koma的主页 1098

【微信小程序】解决text标签文字不居中问题

在text标签中添加`margin:-150rpx`就能将以上的文字调整到中间

weixin_56924782的博客 4226

基于RK3588的YOLOv11目标检测NPU加速系统设计与实现——模型转换(RKNN)、量化与板端部署全流程(含环境搭建与疑难解析)

而RK3588芯片则是一款性能强劲的边缘计算芯片,将YOLOv11部署在RK3588上,可实现本地化的智能检测应用,比如工业质检中的产品缺陷识别、安防领域的异常行为监测等。比如,优化模型的推理速度,可通过调整模型的输入尺寸、使用更高效的推理框架等方式实现;可以使用RK提供的量化工具来完成这一过程,按照工具的使用说明,对ONNX模型进行量化,生成适用于RK3588的模型文件。现在,你已经掌握了从环境搭建到模型部署的全流程,赶快动手实践,让YOLOv11在RK3588上绽放智能光彩,打造属于你的AI应用吧!

m0_71589036的博客 44

关于微信小程序textarea层级过高问题解决

一、前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二、使用场景...

angyangan9569的博客 615

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

小程序textarea的行间距_微信小程序textarea爬坑整理

1.手机端placeholder属性会随页面滚动由于我整个页面要大于手机视窗,于是我设置了overflow:hidden属性,但是textarea里的placeholder中的文字依然会随着屏幕滑动。解决方法 在textarea中设置fixed='true’属性2.textarea层级在最上层,z-index无效这个问题应该很多人都遇到了,目前也没有特别完美的解决办法,目前主流的两种解决方法。解决...

weixin_28992423的博客 2573

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

微信小程序 解决textarea,input等原生组件层级太高遮挡其他组件的问题

微信小程序 解决textarea等原生组件层级太高遮挡其他组件的问题 <view class=''> <button class=''type="primary" style='font-size:12pt;border:0px;width:750rpx'> 保 ...

chenpang2969的博客 2535

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

解决微信小程序textarea 里输入的文字或者是placeholder里的值,飘到弹出view上

在uniapp微信小程序开发中使用textarea,结果发现输入框的问题浮动起来,view无法把他覆盖,设法设置index的值也不生效,所以只能是通过条件v-if或者v-show使其隐藏就可以了 转载于:https://www.cnblogs.com/lwming/p/11459577.html...

weixin_30770495的博客 1271

小程序:实现textarea随输入的文字行数的变化,高度自动增加(类似微信聊天输入框)

小程序:实现textarea随输入的文字行数的变化,高度自动增加(类似微信聊天输入框) 原理:把textarea输入的内容放到text内显示出来,并且把text的内容隐藏,需要用到定位把textarea覆盖到text上。 html: js: css: 效果: 可以自己实现看一下效果是不是自己想要的????。 ...

qq_40919692的博客 4439

微信小程序开发常遇到的问题

最简单的方法,在弹窗时将最顶层view的position属性从relative改为fixed,关闭弹窗时再改回relative。解决方法是在遮罩层出现时,动态的移除textarea标签,在这个过程中要保存好当前输入的内容,文字就不会冒出来了,待遮罩层消失时回显textarea标签内容。可能是容器的原因,当容器内的内容较少,高度填充不够时,上拉下拉的效果都会大受影响,内容多了就没事,不要过虑。2)给textarea添加一个父级,把高度撑起来,height与textarea的相同。

weixin_44132756的博客 1542

微信小程序textarea爬坑整理

1.手机端placeholder属性会随页面滚动 由于我整个页面要大于手机视窗,于是我设置了overflow:hidden属性,但是textarea里的placeholder中的文字依然会随着屏幕滑动。 解决方法 在textarea中设置fixed='true’属性 2.textarea层级在最上层,z-index无效 这个问题应该很多人都遇到了,目前也没有特别完美的解决办法,目前主流的两种解决方...

e1172090224的博客 2643

input层级高 小程序_微信小程序textarea层级过高的解决方法

一、前言相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验,目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制二、使用场景及解决方案1、弹窗...

weixin_36174545的博客 217

input层级高 小程序_微信小程序textarea层级过高(盖住其他元素)问题的解决办法...

前言:这篇文章讲什么微信小程序中 textarea 组件的层级过高如何解决前言:这篇文章对谁有用微信小程序开发者前言:本文有什么用?提供解决问题的思路,供你参考(因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴。或者是做成一个组件然后开源)前言:本文时效性截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高。无法通过 z-index 进行调整。在...

weixin_35705475的博客 625

input层级高 小程序_关于微信小程序textarea层级过高问题解决

一、前言相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验,目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制二、使用场景及解决方案1、弹窗...

weixin_39867142的博客 210

小程序 text decode 真机无效_小程序 textarea 穿透问题 - 微信小程序

这是一个经常会遇到的问题,例如,小程序 form 表单提交信息页面。只要包含 textarea 组件,并且底部有固定的按钮,一定会遇到这个问题。虽然不影响功能,但是还是影响体验。问题截图:可以看到,textarea 中的文字,显示在了按钮上方。看上去就好像按钮是透明的一样。实际会有两个问题:不填写 textarea 文字时,cell 的边框线,会穿透 button,即,可见填写 textarea ...

weixin_39623750的博客 281
上一篇: 微信小程序--cover-view显示内容不全, 被截取的解决方案
下一篇: Xcode 真机调试包(更新到iOS 14 beta 6), 持续更新中...
单细胞的逻辑
博客等级 码龄10年 19粉丝 48原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值