一、功能阐述
实现如下图所示界面,在textarea文本框中显示接收内容,显示接收内容的textarea文本框应该禁止输入。
二、现象
(1)正常:当接收到的内容较少时(如:接收内容量不超过接收内容textarea文本框高度),对textarea文本框内的内容无论如何点击也无法输入;
(2)不正常:当接收到的内容较多时(如:接收内容量超过接收内容textarea文本框高度),会出现垂直滚动条,滑动垂直滚动条至文本末尾进行点击,可以进行输入、删除操作,当所有内容全选删除后,又可以恢复到不可输入状态;textarea组件disabled属性在wxml代码中使用“disabled="{{true}}"”试过也是有这个现象。
三、代码
1、相关WXML代码段
<view class= "titleText" >接收内容:</view> <view class= "textView" > <textarea disabled class= "recvTextArea" value= "{{receiveText}}" maxlength= "-1" bindinput= "recvBindInput" bindblur= "recvBindBlur" bindfocus= "recvBindFocus" /> </view> <view class= "titleText" >发送内容:</view> <view class= "textView" > <textarea class= "sendTextArea" placeholder= "请输入发送内容" value= "{{sendText}}" maxlength= "-1" bindinput= "bindInputSendMsg" /> </view> |
2、相关WXSS代码段
.textView { margin-top : 3 rpx; width : 100% ; height : 150 rpx; border : 1 rpx solid #000 ; border-radius: 6 rpx; word-break:break- all ; } .recvTextArea { width : 100% ; height : 150 rpx; word-break:break- all ; } .sendTextArea { width : 100% ; height : 150 rpx; word-break:break- all ; } |
3、相关JS代码段
data: { recvFrameText: '' , //蓝牙接收数据帧内容 省略…… }, …… wx.onBLECharacteristicValueChange( function (res) { //监听特征值改变事件 var recvText = app.buf2string(res.value) console.log( "原有数据:" + that.data.recvFrameText) console.log( 'index接收到数据:' + recvText) if (that.data.recvFrameText.length < 235) { //在一定长度内原有数据与刚接收的数据进行拼接 that.data.recvFrameText = that.data.recvFrameText + recvText console.log( "拼接数据:" + that.data.recvFrameText) console.log( "数据长度:" + that.data.recvFrameText.length) } else { that.data.recvFrameText = '' that.data.recvFrameText = recvText console.log( "数据长度超过255" ) } that.setData({ receiveText: that.data.recvFrameText })
recvBindInput: function(e) { console.log("产生recvBindInput") }, recvBindBlur: function (e) { console.log("产生recvBindBlur") }, recvBindFocus: function (e) { console.log("产生recvBindFocus") }, |
四、问题
为什么textarea组件使用了属性disabled对其禁止,而还是可以进行输入?如果是微信小程序BUG,请问有什么替代方案?如果不是微信小程序BUG,请教一下如何解决?谢谢!
auto-height 设为 true 就没问题了
同样无效.
我试过了, 模拟器可以, 真机就不行,
这是必现的BUG,
只要你用 textarea 输入内容并且有连续换行两次 , 然后将这个值直接保存云数据库, 然后回显的时候, 点击换行处, 就必现.
请问怎么解决了?
同问
你好,测试华为 7.0.9和iOS7.0.8都未复现问题,提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
试试disabled="{{true}}"