微信小程序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:3rpx; width: 100%; height:150rpx; border: 1rpx solid #000; border-radius: 6rpx; word-break:break-all;}.recvTextArea { width: 100%; height:150rpx; word-break:break-all;}.sendTextArea { width: 100%; height:150rpx; 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，请教一下如何解决？谢谢！
强力驱动