第一步:参考官方文档《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;}