微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上

最新推荐文章于 2024-05-16 14:48:00 发布
最新推荐文章于 2024-05-16 14:48:00 发布
阅读量5.1k 收藏 2
点赞数
分类专栏： 微信小程序原生基础爬坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/81294513
版权

微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上

 

     微信小程序中经常会出现：

弹出view，input框文字飘到view上，如下图。

        

 

··········由于textarea是原生组件实现，层级最高，目前还无法支持在上面覆盖元素这样的交互设计。

既然如此 我们就只能----绕着走了。

 

规避法，弹出view时，把input或者textarea组件移出屏幕，这样即可不挡屏幕。

给input或者textarea的view加上动态样式。

 

wxml:

    <view class="li clear" style="margin-top:{
  {top}};">
          <view class="tit ">意向运价</view>
          <view class="rbox ">
            <input disabled="{
  {isDisabled}}"  class="col-gray" type="digit" name="pay" placeholder="请输入" />
          </
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp 微信小程序表单input输入框，点击下面的输入框时输入法弹出会把输入框内容顶上去
qq_45067263的博客
10-13 2104
当前页面设置了高度，以及滚动轴，输入法弹出时并没有把页面内容往上定，只顶了输入框内容。
小程序-textarea，input内文本浮在定位元素和弹框之上的解决
zhangxy的博客
11-05 3350
试过官方的cover-view包裹加z-index不生效 2、浮在弹框表层 解决 给textarea，input 增加 wx:if 判断条件，当弹框显示是控制 textarea，input 显示条件为 false 即可。 2、浮在定位按钮表层 2、 ...
记录微信小程序textarea高度问题
ZhouJingID的博客
05-16 284
设置了高度自适应，当内容超过一行时高度不变。
解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动，飘起来了。
一键写代码的博客
06-17 3133
bug 类型效果： 输入框内的文字跑了。 解决办法： 测试了网上的监听滚动事件，手动调用wx.hideKeyboard等方式，都不好使。 大概原因： 在页面出现滚动时，输入框跑了。 如果不是滚动页面，不能滚动，就不会出现。 刚开始整个外层标签是<view></view>， 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。 原因可能和小程序原生对scroll-view内的input等滚动做
解决微信小程序placeholder文字”悬浮“问题
weixin_30588729的博客
08-16 2330
方法一： 在弹出层显示时隐藏input或者textarea组件，测试发现只有设置”display:none“才生效，设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏，只不过这些做法都影响布局，不推荐。 后来再想了下，其实可以在隐藏textarea的时候用view来模拟textarea显示内容，这样既不改变布局，也能合理地展...
Uniapp，微信小程序input和textarea的placeholder内容穿透view层的解决方案
小星博博的博客
05-02 1601
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
解决微信小程序textarea 里输入的文字或者是placeholder里的值，飘到弹出view上
weixin_30770495的博客
09-04 1128
在uniapp微信小程序开发中使用textarea，结果发现输入框的问题浮动起来，view无法把他覆盖，设法设置index的值也不生效，所以只能是通过条件v-if或者v-show使其隐藏就可以了 转载于:https://www.cnblogs.com/lwming/p/11459577.html...
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序 内容自适应textarea表单组件（autoheight_textarea）
01-30
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
微信小程序textarea 问题处理
03-29
使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。  (此图片来源于网络，如有侵权，请联系删除! )  就是textarea不能跟随一起滚动。  微信小程序给了一些Bug和建议：  (此图片来源于网络，如...
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它允许开发者创建可滚动的内容区域，以处理超出屏幕范围的内容。本实例主要讲解如何利用 `scroll-view` 实现自动滑动到底部的功能，这对于聊天界面、评论...
美容预约-微信小程序-html
最新发布
05-27
例如，JavaScript可以监听表单提交事件，验证用户输入，调用微信小程序的网络请求接口发送预约请求到服务器，并处理返回的响应数据。 五、微信小程序生命周期管理 每个微信小程序页面都有其特定的生命周期，包括...
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 2630
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
微信小程序，实时获取textarea输入信息
Thea12138的博客
03-27 4139
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入texterea内容" value="{{ceshi}}" /> 利用聚焦失焦获取输入框内容，缺点是：输入内容后，直接点击提交，获取不到内容，只有点击textarea区域之外才可以触发函数，获得值 <textarea bindinput="b...
微信小程序-textarea获取输入值（利用表单按钮）
7TribeZ的博客
06-06 4994
textarea可以bindconfirm（键盘输入完成时执行）也可bindinput（键盘输入时执行）这些在手机上都依赖于小键盘，如果加一个按钮完成将textarea的值传递都逻辑层呢。可以借助表单的bindsubmit。 wxml <form bindsubmit='bindFormsubmit'> <textarea bindconf...
小程序iOS使用input输入时placeholder及输入内容上移消失
weixin_33813128的博客
10-30 1641
为什么80%的码农都做不了架构师？>>> ...
input type=“textarea“ 的placeholder内容穿透其他弹出层
qq_49490164的博客
05-13 497
input type=“textarea” 的placeholder内容穿透其他弹出层 首先，这个穿透问题是原生的，无法用样式改变 那么我选择最简单的方法，当其他表单弹出层显示时，隐藏textarea，完美解决！ 言简意赅上代码 html <uni-forms-item label="类型" name="dictHouseRenovation"> <uni-data-picker placeholder="请选择类型" popup-title="请选择类型" :localda
微信小程序 textarea 复制一大段内容粘贴到内容框，所有文字会往上推，在页面上看不到内容
SakuraLLj的专栏
02-23 9004
现象写纸条页，复制一大段内容粘贴到内容框，所有文字会往上推，在页面上看不到内容，应该使得光标定位在输入框的最底下 <textarea class="program-write-main" maxlength="2000" placeholder="写在这儿，留给别人看看" bindinput="inputMsg"></textarea>解决办法//加 fixed="true" <textare
微信小程 input序键盘弹起时，是否自动上推页面 adjust-position，input底部悬浮聚焦键盘弹起遮盖
hangGe0111的博客
12-27 5004
1.背景： 对于某些在输入框聚焦时不需要向上推动页面的需求，可以尝试此方法，小程序官方文档也有说明。 2.思路： 2.1给底部悬浮的部分动态设置bottom,聚焦时设为键盘弹起的bottom值，失焦时设置bottom为0； 2.2 给input框设置adjust-position="{{false}}" 即可。 3.代码 3.1 wxml 3.2js 4.效果 5....
微信小程序textarea输入文字，点击按钮把数据带到函数
08-06
### 回答1： 在小程序中，可以使用textarea组件来获取用户输入的文字。在点击按钮时，可以使用bind:tap或者catch:tap来绑定按钮的点击事件，在事件处理函数中，使用event.detail.value来获取textarea组件中的值。 示例代码: WXML: ``` <textarea placeholder="请输入文字" bindinput="getInputValue" id="textarea"></textarea> <button bind:tap="submitData">点击提交</button> ``` JS: ``` Page({ data: { inputValue: "" }, getInputValue: function (e) { this.setData({ inputValue: e.detail.value }) }, submitData: function () { console.log(this.data.inputValue) } }) ``` 在这个例子中，当用户在textarea中输入文字并点击按钮时，submitData函数会被调用，并在控制台中打印出用户输入的文字。 ### 回答2： 微信小程序中的textarea是用于用户输入多行文本的组件，我们可以通过点击按钮的方式获取textarea输入的文字数据，将其带入到相应的函数中进行处理。 首先，在wxml文件中，我们需要编写相应的代码。示例代码如下： ```html <view> <textarea bindinput="textareaInput"></textarea> <button bindtap="handleButtonClick">点击按钮</button> </view> ``` 在这段代码中，textarea绑定了一个名为`textareaInput`的事件，该事件会在用户输入时被触发。按钮绑定了一个名为`handleButtonClick`的事件，该事件会在按钮被点击时被触发。 接下来，在对应的js文件中，我们需要编写相应的函数来处理按钮点击事件，并获取textarea输入的文字数据。示例代码如下： ```javascript Page({ data: { textareaValue: '' // 初始化textarea的值为空 }, textareaInput(e) { this.setData({ textareaValue: e.detail.value // 获取用户输入的文字并存储在data中的textareaValue变量中 }); }, handleButtonClick() { const inputData = this.data.textareaValue; // 获取data中的textareaValue变量的值，即用户输入的文字数据 // 在这里可以进行相应的数据处理操作 console.log(inputData); } }) ``` 在这段代码中，我们使用了data来存储textarea的值，通过`textareaInput`函数来更新data中的textareaValue变量，以获取用户输入的文字数据。在`handleButtonClick`函数中，我们通过`this.data.textareaValue`来获取保存在data中的textareaValue变量的值，即用户输入的文字数据，并进行相应的处理。 这样，我们就可以实现点击按钮将textarea输入的文字数据带到函数中进行处理了。 ### 回答3： 在微信小程序中，我们可以使用textarea组件来实现输入文字的功能。当用户在textarea中输入了文字后，我们可以通过绑定一个input事件来获取输入的内容，并将其保存在一个变量中。接下来，我们可以在点击按钮时，将这个变量作为参数传递给一个函数来处理。 首先，在小程序的wxml文件中，我们需要添加一个textarea组件和一个按钮组件： ```html <view> <textarea bindinput="getText"></textarea> <button bindtap="handleClick">点击按钮</button> </view> ``` 其中，bindinput表示textarea的输入事件，我们在这个事件中调用getText函数来获取输入的内容。而bindtap表示按钮的点击事件，我们在这个事件中调用handleClick函数来处理数据。 接下来，在小程序的js文件中，我们需要定义这两个函数： ```javascript Page({ data: { textContent: '' }, getText: function(e) { this.setData({ textContent: e.detail.value }) }, handleClick: function() { // 在这里可以通过this.data.textContent来获取输入的文字内容，进行处理 console.log(this.data.textContent); // 在这里调用其他函数来处理数据，或者进行其他操作 // ... } }) ``` 在getText函数中，我们通过调用setData函数将textarea中的输入内容保存在data中的textContent变量中。 在handleClick函数中，我们可以通过this.data.textContent来获取之前保存的文字内容，并进行处理。在这里，我简单地通过console.log打印了一下文字内容，你可以在这里调用其他函数来处理数据，或者进行其他操作。 这样，当用户在textarea中输入文字后，点击按钮时，数据会被带到handleClick函数，并可以在这个函数中进行进一步的处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值