微信小程序开发中textarea实现输入框问题

最新推荐文章于 2024-04-22 01:38:39 发布
最新推荐文章于 2024-04-22 01:38:39 发布
阅读量527 收藏 7
点赞数 6
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41672471/article/details/135706505
版权

textarea 聊天输入框高度自适应问题

用微信小程序的组件 textarea 写聊天输入框的时候遇到以下几个问题：

  1. 使用 bindlinechange 监视行数变化时，若使用 event.detail.heightRpx，在开发工具中调试没什么问题，但是在真机调试的时候会出现不换行

问题出现在真机调试的时候无法获取属性 heightRpx，我们可以看看打印了什么

在这里插入图片描述

中间是 heightRpx 的值，发现我们并未获取到，这应该算是一个 bug 吧，所以我们应该换种方法思考：

在 CSS 中，我们将 font-size = 38rpx，那么我们自己计算 heightRpx = 38rpx * lineCount ， 这样即可计算出高度

  1. 真机调试聚焦的时候，键盘会挡住输入框

解决方法就是给元素加上属性 cursor-spacing="20"

  1. 微信小程序提供的属性中，show-confirm-bar="false" 无用问题

这个问题很抽象，翻开发者社区找到解决方案：改为 show-confirm-bar="{{false}}"

YRoads
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
微信小程序textarea组件
qq_39702981的博客
11-28 1501
textarea 多行输入框。该组件是原生组件，使用时请注意相关限制。 属性名 类型 默认值 说明 最低版本 value String   输入框的内容   placeholder String   输入框为空时占位符   placeholder-style String   指定 place...
微信小程序 - ＜textarea＞ 多行文本输入框 placeholder 属性换行显示文字（样式修改的详细教程）
王佳斌
10-20 7753
解决微信小程序input框 placeholder 换行textarea，wechat小程序 textarea的placeholder如何换行，vant-weapp 组件库 Field 输入框组件 van-field 的placehold怎么换行？,微信小程序中如何设置textarea中的placeholder换行显示，css input输入框placeholder样式的修改，怎么让textarea的灰色placeholder换行显示描述呢，微信小程序 - textarea 多行文本输入框 placehol
关于微信小程序 textarea 遇到的坑
T3165919332的博客
07-17 1793
textarea的abjust-position属性。设置adjust-position为false。
小程序textarea输入框输删除内容光标错位问题
yangbo1993的博客
11-13 332
问题原因： 在mpvue 或 uinapp 中对 textarea 使用了 v-model。其本质原因是因为 v-model 会被mpvue 或 unapt 编译为原生的 bindinput 事件，然后在bindinput 中 setData textarea的 value 以及会有其他的一些处理逻辑, 频繁的设置导致了这个问题。解决方案： 不使用 v-model，使用原生的 bindinput 事件来做处理逻辑，在 mpvue 中可以使用官方提到的 v-model.lazy。
使用微信小程序开发制作一个即时消息聊天应用
最新发布
qq_67153941的博客
04-22 495
为了实现实时的消息收发，需要在小程序的逻辑层 JavaScript 中，使用 WebSocket 连接服务器，并监听服务器发送的消息。为了实现创建和加入聊天群组的功能，可以在小程序中添加一个群组列表页面和一个创建群组的页面。在群组列表页面，展示用户所加入的群组，并提供加入群组和创建群组的操作。为了实现聊天记录的保存和查看功能，需要在服务器端保存用户的聊天记录，并提供相应的接口供小程序调用。然后，在小程序的逻辑层 JavaScript 中，添加登录按钮的事件处理函数，使用微信的。可以使用微信的列表组件。
微信小程序 textarea
qq_40419454的博客
03-13 190
第一次写博客，记录一下自己遇到的坑 微信小程序的textarea组件如果在fixed定位区域内必须要加fixed=“true”,不然就会这样 这个问题web开发工具体现不出来，只有在真机上才能体现出来 ...
微信小程序——textarea
weixin_57681196的博客
06-23 933
当我们在HTML的表单中使用textarea元素时，常常需要限制用户输入的字符数量。这时我们可以使用maxlength属性，它可以控制textarea中输入的最大字符数量。但是，在使用maxlength属性时需要注意以下事项：maxlength属性不是强制性的，用户可以通过复制粘贴等方式绕过maxlength的限制。因此在后端也需要对用户的输入进行验证和过滤。maxlength属性只限制用户输入的字符数量，不限制用户输入的行数。
微信小程序之textarea学习
yxy099的博客
11-17 164
1.textarea 多行输入框。该组件是原生组件，使用时请注意相关限制。 2.属性 3.代码 4.代码运行截图
微信小程序_07_textarea
杨勇博客之家
02-18 373
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
微信小程序 textarea 详解及简单使用方法
01-03
微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。 虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入值， 解决方法：结合from表单，textarea文本框输入后，再去点击提交按钮，这时会先执行textarea事件（获取文本框输入内容），再去执行数据提交，这样问题就解决了 wxml文件代码： <form bindsubmit=evaSubmit> <textarea name=evaConten
微信小程序textarea 问题处理
03-29
使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。  (此图片来源于网络，如有侵权，请联系删除! )  就是textarea不能跟随一起滚动。  微信小程序给了一些Bug和建议：  (此图片来源于网络，如...
微信小程序 textarea 组件详解及简单实例
11-27
微信小程序textarea 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  微信小程序 form 微信小程序 checkbox 多行输入框。 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 placeholder-style String   指定 placeho
微信小程序 内容自适应textarea表单组件（autoheight_textarea）
01-30
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
一步快速解决微信小程序中textarea层级太高遮挡其他组件
10-17
主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习...
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序文本输入＜textarea/＞ 详解
热门推荐
代码小疯子
12-21 1万+
在微信小程序开发中，input 用来实现文本输入，是单行的，textarea是多行的输入实现
微信小程序中textarea与input的问题总结
忧郁的蛋的专栏
09-21 976
微信小程序中，有两个原生组件textarea和input，这两个组件单独只用一个时，是没有什么问题的，但是当他们两个一起出现时，问题就接踵而来，并且都是些很玄学的问题，我在开发时就遇到了这些玄学的问题，一个简单的表单填写页面，只是为了实现一个手动实现页面上推的功能，硬是搞了好几天才弄好！的相关知识，其中主要介绍了关于小程序中textarea与input的问题总结，这两个组件单独只用一个时，是没有什么问题的，但是当他们两个一起出现时，问题就接踵而来，下面一起来看一下，希望对大家有帮助。
微信小程序textarea输入框外部高度怎么随着一起变化
05-16
你可以使用CSS的flex布局来实现这个效果。首先，将文本输入框放在一个容器中，并将容器设置为flex布局。然后，将容器的高度设置为100%。这样，容器会自适应父容器的高度。 接着，你可以在父容器中添加其他元素，使它们也参与flex布局。这些元素的高度也可以设置为100%，这样它们就可以随着父容器的高度自适应。 最后，你可以通过设置父容器的高度来改变所有元素的高度。例如，如果你想将父容器的高度设置为屏幕高度的50%，你可以使用以下CSS代码： ``` .container { display: flex; flex-direction: column; height: 50vh; } .textarea { flex: 1; height: 100%; } .other-element { height: 100%; } ``` 在上面的代码中，`.container`是父容器的类名，`.textarea`是文本输入框的类名，`.other-element`是其他元素的类名。`vh`是一个CSS单位，表示视口高度的百分比。例如，50vh表示屏幕高度的50%。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YRoads

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值