收藏
回答

微信小程序textarea组件在disabled后仍然可以输入

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug textarea组件 微信iOS客户端 7.0.5 2.9.4

一、功能阐述

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


最后一次编辑于  2019-12-09
回答关注问题邀请回答
收藏

7 个回答

  • 许一世承诺
    许一世承诺
    2021-05-25

    auto-height 设为 true 就没问题了

    2021-05-25
    有用
    回复
  • 🍩
    🍩
    2020-10-17

    同样无效.

    我试过了, 模拟器可以, 真机就不行,

    这是必现的BUG,

    只要你用 textarea  输入内容并且有连续换行两次 , 然后将这个值直接保存云数据库, 然后回显的时候, 点击换行处, 就必现.

    2020-10-17
    有用
    回复
  • 晓晓晓晓晓
    晓晓晓晓晓
    2020-03-16

    请问怎么解决了?

    2020-03-16
    有用
    回复
  • 遥ོ远ོ的ོ梦ོ
    遥ོ远ོ的ོ梦ོ
    2020-03-12

    同问

    2020-03-12
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-12-09

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

    2019-12-09
    有用
    回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-12-09

    试试disabled="{{true}}"

    2019-12-09
    有用
    回复 1
    • 顺信德
      顺信德
      2019-12-09
      试过了,还是有问题。
      2019-12-09
      回复
  • 🍀 🍀柠檬草精灵🍀🍀💕
    🍀 🍀柠檬草精灵🍀🍀💕
    2019-12-09
    在吗
    2019-12-09
    有用
    回复 1
    • 顺信德
      顺信德
      2019-12-09
      2019-12-09
      回复
登录 后发表内容
问题标签