700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序-textarea字数统计与限制

微信小程序-textarea字数统计与限制

时间:2024-05-10 05:08:08

相关推荐

微信小程序-textarea字数统计与限制

第一步:参考官方文档《textarea小程序》

textarea多行输入框。该组件是原生组件,使用时请注意相关限制。

用到的属性:

效果:

描述限制最小输入10个字,最多输入200个字

第二步:实现

思路:

bindinput="getValueLength"对textarea进行数据绑定;在getValueLength方法中let value = e.detail.value来获取textarea的值;用let len = parseInt(value.length)获取textarea的长度进行最大最小数字判断

1).wxml页面:

<view class="contant"><view class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</view><textarea name="bindTextAreaBlur" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText" maxlength="{{max}}" minlength="{{min}}"auto-focus> <text class="minWord">{{minWord}}</text></textarea></view><view class="tips">不能填写QQ、微信、电弧等联系方式,否则后台会把此信息删除。</view>

2).js页面:

data: {max: 200, //限制最大输入字符数min: 10, //限制最小输入字符数minWord: ''//提示语句},/****限制字数与计算 */getValueLength: function (e) {let value = e.detail.valuelet len = parseInt(value.length)//最少字数限制if (len <= this.data.min)this.setData({minWord: "至少填写10个字哦~"})else if (len > this.data.min)this.setData({minWord: " "})//最多字数限制if (len > 200) return;this.setData({currentWordNumber: len //当前字数 })},

3).wxss页面:

/* pages/release/editText.wxss */page {background-color: rgb(247, 247, 247);}.contant {border-top: 1px solid rgb(247, 247, 247);width: 100%;margin: 0 auto;background-color: #ffff;}textarea {min-height: 500rpx;max-height: 500rpx;padding: 10rpx 10rpx;font-size: 16px;width: 94%;margin-left: 3%;margin-top: 15px;}.tips {width: 96%;margin-left: 2%;height: 45px;color: rgba(136, 136, 136, 1);font-size: 14px;margin-top: 15px;text-align: left;font-family: PingFangSC-regular;}.minWord {color: red;font-size: 14px;position: absolute;top: 30px;}.currentWordNumber {height: 35px;line-height: 35我是谁px;font-size: 14px;float: right;margin-right: 15px;color: rgba(136, 136, 136, 1);margin-bottom: 10px;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。