微信小程序textarea组件在disabled后仍然可以输入
发布于 6 年前 作者 zhouchao 8677 次浏览 来自 问答

一、功能阐述

实现如下图所示界面,在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,请教一下如何解决?谢谢!

3 回复

试试disabled="{{true}}"

你好,测试华为 7.0.9和iOS7.0.8都未复现问题,提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

回到顶部