对文本框内容提交限制字数,避免被攻击

文章介绍了在小程序中使用textarea组件进行多行文本输入,并添加字数限制功能以防止攻击。通过WXML定义textarea组件,设置maxlength属性限制字数,同时在JS中处理bindinput事件,实时更新显示剩余字数。数据模型使用了currentWord和maxWord来跟踪已输入和最大允许的字数。
摘要由CSDN通过智能技术生成

 文本框提交内容,是小程序常需要的组件。

一般需要多行提交,就需要textarea组件。

我这里加了一个字数限制。加一个字数限制的好处呢。避免被攻击。

下面是wxml:

<view class="container" >
  <form bindsubmit="formsubmit">
    <textarea class="kuang"   name="content"  placeholder="请输入您的意见或者建议,限500字"  maxlength="500" bindinput='limitWord' >
       <view class="clear">
    <text style="float: right">{{currentWord}}/{{maxWord}}(最多可输入500字)</text>
  </view>
</textarea>  <!--这个name还不能动啊,maxlength字数限制-->

Js

 limitWord:function(e){
      var that = this;
      var value = e.detail.value;
      //解析字符串长度转换成整数。
      var wordLength = parseInt(value.length); 
      if (that.data.maxWord < wordLength) {
        return ;
      }
      that.setData({
        currentWord: wordLength 
      });
    },

因为需要setdata时事显示

  data: {
    maxWord: 500,
    currentWord: 0
  },

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值