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

最新推荐文章于 2024-06-27 10:20:38 发布
最新推荐文章于 2024-06-27 10:20:38 发布
阅读量5.2k 收藏 2
点赞数
分类专栏： 微信小程序原生基础爬坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/81294513
版权
在微信小程序中，当input或textarea的内容或placeholder与弹出view重叠时，可通过动态调整input样式，将其移出屏幕来避免遮挡。在弹出view时设置input的margin使其移出屏幕，关闭view时再移回原位置。
摘要由CSDN通过智能技术生成

微信小程序-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 "&g
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序，输入框内容滑动飘动
喜兴
01-13 2370
解决方案： 输入框设置 always-embed <input placeholder="请输入" always-embed="{{true}}" value="{{waterTreatment}}" type="digit" bindblur="bindInputChange"></input>
小程序奇怪的bug——入框内容会滑动飘动
weixin_46121939的博客
11-09 1144
小程序输入框内容会滑动飘动问题
解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题
最新发布
weixin_45776545的博客
06-27 577
【代码】解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题。
ios下微信小程序中input框漂移问题
qq_41539461的博客
12-22 780
不断尝试的过程中发现，如果删除小程序，重新进入，第一次进入这个购物车页面的时候，不论如何滑动，这个input框都是正常显示的，离开页面第二次进入就会出现错位的问题，这时候这个bug原因就变的清晰了起来。一旦明确了这个问题，我就尝试了一种最简单的方法，在弹窗上增加了v-if判断，强制每次进入都重新渲染一遍，至此，困扰半个月的问题解决了。最近开发一个弹窗购物车的时候出现了滑动弹窗时里面的数字input框错位的问题，上微信社区看了好多问答仍然没有解决。同时这个问题还是一个兼容性问题，只在苹果手机上出现。
解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动，飘起来了。
一键写代码的博客
06-17 3230
bug 类型效果： 输入框内的文字跑了。 解决办法： 测试了网上的监听滚动事件，手动调用wx.hideKeyboard等方式，都不好使。 大概原因： 在页面出现滚动时，输入框跑了。 如果不是滚动页面，不能滚动，就不会出现。 刚开始整个外层标签是<view></view>， 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。 原因可能和小程序原生对scroll-view内的input等滚动做
解决微信小程序placeholder文字”悬浮“问题
weixin_30588729的博客
08-16 2339
方法一： 在弹出层显示时隐藏input或者textarea组件，测试发现只有设置”display:none“才生效，设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏，只不过这些做法都影响布局，不推荐。 后来再想了下，其实可以在隐藏textarea的时候用view来模拟textarea显示内容，这样既不改变布局，也能合理地展...
微信小程序如何实现实时显示输入内容
tl437002770的博客
01-30 696
微信小程序如何实现实时显示输入内容
微信小程序自制提示框（具有输入文本功能）
热门推荐
踏雪无痕的博客
07-11 3万+
微信小程序自带的API中的页面交互功能，虽然提示功能非常全面，但是所有的交互API中是没有可以自己在提示框中输入文本的功能，那么现在我们来自己做这样的一个提示框（可以带有输入功能），在提示框输入完内容之后，点击确定，可以将文本内容返回，点击取消则可以回到之前的状态。（在这里，主页面的布局可以根据每个人的想法来布局，这里展示的css之后展示提示框部分的）1、首先打开微信开发者工具，建立一个代码模板，...
悬浮显示input框内容
m0_67974899的博客
10-08 573
这个时候需要悬浮显示input中所有的内容，而title提示则要在input添加以下代码，这样既可实现用title提示文本框中所有内容。项目中会遇到这样的一个问题，在一个内容框中，由于框的宽度是固定的，但是里面的内容却有很多。
解决微信小程序input滑动时内容上移
qq_43076278的博客
07-15 1586
在输入框获取焦点的时候给其加个view包住，属性catchtouchmove设置不可滑动。既然在边缘滑动就会有问题那就动态设置是否可以滑动获取焦点不可滑动失去焦点可滑动。在input框获取焦点的时候，上下滑动会使其文字悬浮。......
微信小程序 textarea 简易解决方案
03-29
微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。 虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入...
微信小程序 内容自适应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` 实现自动滑动到底部的功能，这对于聊天界面、评论...
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
lgh_ss的博客
05-28 3644
在ios9.+的版本上，遇到了一个问题。在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然，前提是你这个页面是超过一屏需要滚动的时候 解决办法： 1 页面可通过样式的滚动（overflow-y: auto）来写，但是不要用 -webkit-overflow-scrolling: touch; 2页面用scroll-view,通过变量{sysScroll}来控制 view: <scroll-view scroll-y="{{sysScroll}}"
Uniapp，微信小程序input和textarea的placeholder内容穿透view层的解决方案
小星博博的博客
05-02 1629
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
关于input框背景图和文字重叠的解决办法
Kidaze的博客
08-27 4171
input框内放了图标后可能会与文字重叠，设定过图标的位置，大小或文字的text-overflow，text-align都不好使，都会造成如图的重叠情况： 后来歪打正着给input添加padding-left = 固定值，发现问题完美解决： 添加padding-left固定值后图标位置不变，而不会因为文字过多而和图标重叠。   再添加：padding要和text-align结合使用...
解决 微信小程序 input错位
u011200562的博客
04-09 2341
问题：微信小程序input获取焦点时内容飞到上面了，input用view标签包裹，未使用定位 解决：最外层标签使用scroll-view包裹，当input获取到焦点时，scroll-view的属性scroll-y设置为false，当input失去焦点时，scroll-y设置为true 代码： <scroll-view scroll-y="{{isScroll}}"> //页面内容 <view> <input bindfocus="onfocus" bindb
微信小程序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、付费专栏及课程。

余额充值