小程序-textarea，input内文本浮在定位元素和弹框之上的解决

最新推荐文章于 2022-11-11 14:44:40 发布
最新推荐文章于 2022-11-11 14:44:40 发布
阅读量3.3k 收藏 2
点赞数 3
分类专栏： 小程序开发 文章标签： 小程序 textarea input 浮在弹框之上 浮在定位元素之上
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43549408/article/details/102919046
版权
  • 试过官方的cover-view包裹加z-index不生效

1、浮在定位按钮表层

  • 问题显示如下

在这里插入图片描述

<view class='pageContent'>
	<text>超长的页面内容</text>
</view>
<!-- 底部定位元素 -->
<view class='foot_cate'
最低0.47元/天 解锁文章
zhangXY_
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上
kerryqpw的博客
07-31 5129
微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上        微信小程序中经常会出现： 弹出view，input框文字飘到view上，如下图。            ··········由于textarea是原生组件实现，层级最高，目前还无法支持在上面覆盖元素这样的交互设计。 既然如此 我们就只能----绕着走了。  ...
微信小程序--input,textarea等原生组件层级太高穿透覆盖在其它元素之上解决方案
qq_41822157的博客
06-25 1982
input,textarea都是原生组件，层级高到用z-index都无法改变。在底部有固定按钮的时候，滑动后input和textarea的placeholder和value值都会显示在固定按钮上面，如下图 布局如下 <view class="actionbox flex"> <view class="action_left" bindtap="openCancelModel">取消订单</view> <view class="act
小程序关于textarea浮上弹出层的解决方法
qq_39300698的博客
05-06 918
小程序关于textarea浮上弹出层的解决方法 小程序关于textarea浮上弹出层的解决方法 最近项目中有个自定义弹出层的需求，刚开始做出来，还觉得小有一点成就感，马上测试数据都录入之后，就发现，下层form表单中的文字浮上来了，在弹出层上，检查发现是有用到textarea的地方，文字出现此问题。 找原因 1.首先想到是不是因为 textarea 的原因，因为input文字正确，检查之后，发现没...
微信小程序在input上放一个button点击问题
meteorites的博客
09-25 7967
如图所示,取消按钮定位在input框之上, 当我们点击的时候,input框一直是获取焦点状态,无法执行 取消事件. 解决方案,      给外层包裹的view ( 图2 黑线标注的地方是外层包裹的view) 设置padding-right 等于取消按钮的宽度即可....
vue实现弹出框后光标自动定位到输入框Input
u013934601的博客
07-28 4087
当弹出框打开后，光标自动定位到弹出框里面的输入框 效果： 实现： 输入框代码 关键代码 ref="xxxx" 弹出框按钮加上如下代码：
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法
qq_32849999的博客
08-20 793
参考：https://blog.csdn.net/DeepLies/article/details/81511722
遇到的小问题： input和button放在一行
x_xxXmm的博客
08-23 8621
今天遇到的问题是 &lt;p id="search"&gt;搜索：&lt;input type="text" placeholder="请输入关键字" ng-model="search" &gt; &lt;/p&gt; &lt;button class="btn add_btn" ng-click="add()"&am
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
10-17
在微信小程序开发过程中，开发者可能会遇到textarea组件层级过高导致覆盖其他元素的问题。微信小程序的textarea组件作为原生组件，它的层级被设定为最高，这意味着它会位于页面中其他所有组件之上，即便是设置了高z-...
custom-textarea：Web组件custom-textarea元素
02-06
安装npm i @lemmon/custom-textarea在Web应用程序内部使用// does register the component for you// with `custom-textarea` tagnamerequire ( '@lemmon/custom-textarea' ) 要么// does not register the ...
微信小程序 textarea 简易解决方案
03-29
微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。 虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入...
将input框中输入内容显示在相应的div中【三种方法可选】
01-21
例题一枚：在input框中输入内容，会相应的显示在下面的div中的不同做法： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <link rel=stylesheet type=text/css href=css/bootstrap.css rel=external nofollow /> <style type=text/css> #div{ width: 175px; height: 100px; margin: 20px 84px; border:2px
Caret-position:在 inputtextarea 元素上获取和设置用户的插入符号选择
06-07
插入位置获取并设置用户在输入或文本区域上的文本选择。 有关示例用法，请参见 test.html。应用程序接口 // Set caret position after the first charactercaretPosition . set ( input , 1 )caretPosition . get ( ...
input 组件层级高 漂浮在 fixed 元素之上 解决方案
conggeqw12138的博客
03-31 599
<!-- 问题描述 input 组件层级高 漂浮在 fixed 元素之上, fixed元素设置z-index再高也覆盖不了input 思路 input 和 view 元素 设置一样的css样式 设置为绝对定位 input层级比view高 input 绑定 focus 事件 当聚焦输入时设置opacity为1 绑定 blur 事件 当失焦时设置opacity为0 (设置透明度是为了下次点击 时 聚焦事件可以触发) 失焦后opacity 为0
解决微信小程序textarea标签使用fiexed样式时placeholder“悬浮”问题
weixin_43525746的博客
04-25 1004
解决方法： 给textarea标签加上属性： fixed = “{{true}}” 详细描述： 在练习编写一个类似简书的博客社区微信小程序的时候，文章详情页面下方的textarea框的html和css如下 <textarea cursor-spacing="10" class="commentArea" bind:focus="handleFocust" fixed...
小程序弹出模态框（可输入文字）
array_sum的博客
05-30 1114
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、如何使用？二、wxml1.wxml2.js2.wxss总结 前言 其实小程序实现模态框实现其实比较繁琐也不太方便,以下给大家分享一个自己做过一些小案例 一、如何使用？ 基于小程序自带的wx.model组件 二、wxml 1.wxml 代码如下： <!--弹窗--> <view class="modal-mask" bindtap="hideModal" catchtouchm
在input元素下面做一个弹出框，点击弹出框弹出框不消失，点击其他地方弹出框消失
weixin_46787337的博客
11-11 1555
/这里是关键，关闭弹窗应当是有条件的关闭，只有条件为false是才关闭。//弹窗在onblur后将条件变成false,并手动关闭弹窗。2.监听input元素的focus事件。//弹窗被点击时要把条件改成true。1.将弹出框定位到input元素下面。3.点击弹出框以外的地方弹出框消失。2.点击弹出框的文字弹出框不消失。1.点击input弹出弹出框。
关于input标签前后有汉字并要求汉字与输入框在一条直线上
xqh_silence的博客
04-11 5949
具体做法是：首先将input标签用一个div标签包裹，并设置div的属性为：style='display:inline'，同时也设置input的属性为：style='display:inline'，input前后都可加汉字，实例如下： <div style="display:inline">微信红包&nbsp;&nbsp;<input type...
[Element-ui]Tabs 标签页中如何点击tab，在其下面或右边显示页面的同时保留tab导航栏
A88552211的博客
03-02 815
<template> <div class="Person"> <el-tabs tab-position="left" style="height: 92vh;"> <el-tab-pane label="用户管理"> <Register>这个是要显示的标签哦组件</Register> </el-tab-pane> <el-tab-pane labe.
小程序textarea设置auto-height失效_微信小程序textarea层级过高的问题及解决办法
weixin_39591386的博客
12-04 1345
一、前言相信做过微信小程序开发的人应该都碰到过这个问题，因为这个需求实在太常见了，由于textarea是属于原生组件，层级最高，不管在页面中我们设置z-index值多少都会被textarea组件遮挡住，很影响用户体验，目前官方对该问题还没有修复，当然官方也给出了解决该问题的其他方案，使用cover-view和 cover-image替代，但个人感觉并不是很好，有一些限制。二、使用场景及解决方案1、...
微信小程序textarea钟怎么保存文本
最新发布
06-09
要保存微信小程序中 textarea 中的文本，可以通过以下步骤： 1. 在 textarea 上绑定一个输入事件，例如：bindinput。 2. 在输入事件中获取 textarea 中的文本内容，并将其保存在一个变量中。 ``` <textarea bindinput="onInput"></textarea> data: { content: '' }, onInput: function(event) { this.setData({ content: event.detail.value }) } ``` 3. 在需要保存文本的时候，将文本内容存储在本地缓存中。 ``` wx.setStorageSync('text', this.data.content) ``` 4. 在需要读取文本的时候，从本地缓存中获取保存的文本内容。 ``` var text = wx.getStorageSync('text') ``` 注意：保存在本地缓存中的数据不能超过 10MB。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值