auto-height 设为 true 就没问题了
微信小程序textarea组件在disabled后仍然可以输入一、功能阐述 实现如下图所示界面,在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,请教一下如何解决?谢谢!
2021-05-25