小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

Page({
  data: {
    todoLists:[
      {
        detail:"",
        date:"",
        location:"",
        priority:"",
        remark:"",
        dateStatus:false,
        locationStatus:false,
        dateRepeat:false,
        completeStatus: false,
        currentInput:"",
      },
      {
        detail: "",
        date: "",
        location: "",
        priority: "",
        remark: "",
        dateStatus: false,
        locationStatus: false,
        dateRepeat: false,
        completeStatus: false,
        currentInput:"",
      }
    ],
  },
  getInput:function(e){
    let index = e.currentTarget.dataset.index;
    let currentInput = `todoLists[${index}].currentInput`;
    this.data.todoLists[index].currentInput = e.detail.value;
    this.setData({
      todoLists: this.data.todoLists
    })
    console.log(this.data.todoLists[index].currentInput) // 可以实时改变
  }
})
<textarea class="weui-textarea {{ item.completeStatus && item.completeStatus === true ? 'text-transparent' : '' }}" placeholder="请输入文本" bindinput="getInput" maxlength="1000" data-index="{{index}}" value="{{item.currentInput}}" auto-height auto-focus="true" />

小程序中监听textarea或者input输入的值动态改变data中数组的对象的值,不能通过setData设置数组对应索引的对象的值来改变,改变之后,能检测到改变,但是值为空。先通过赋值改变其中数组中的对象的值,然后重新设置数组。

参考链接:https://blog.youkuaiyun.com/chou_out_man/article/details/75575100


更多专业前端知识,请上 【猿2048】www.mk2048.com
### 实现监听微信小程序中 `textarea` 的 `value` 在微信小程序中,可以通过 `bindinput` 事件来监听 `textarea` 输入框内容的变化。该事件会在每次键盘输入时触发,返回当前的输入,从而实现对 `textarea` 的实时监控。 ```html <textarea bindinput="onTextareaInput" maxlength="200" placeholder="请输入内容,限制200字以内"></textarea> <view class="word-count">{{currentWordNumber}}/200</view> ``` 在页面的 JavaScript 文件中定义 `onTextareaInput` 方法,用于获取处理用户输入的内容: ```javascript Page({ data: { currentWordNumber: 0, textareaValue: '' }, onTextareaInput(e) { const value = e.detail.value; const maxLength = 200; if (value.length <= maxLength) { this.setData({ currentWordNumber: value.length, textareaValue: value }); } else { const limitedValue = value.slice(0, maxLength); this.setData({ currentWordNumber: maxLength, textareaValue: limitedValue }); } } }); ``` 通过这种方式,不仅可以监听到 `textarea` 的 `value` 变化,还可以实现对输入内容长度的动态控制和展示[^1]。 ### 注意事项 - **光标跳动问题**:当快速删除内容时,可能会出现光标跳到最后的问题。为了解决这一问题,可以结合 `setData` 操作确保每次更新都是同步进行的。 - **多组件交互**:如果需要同时监听多个输入控件的状态(如 `input`、`textarea`),可以在同一个事件处理函数中统一管理这些控件的根据它们的状态改变按钮或其他 UI 元素的行为[^4]。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值