第一步:参考官方文档《textarea小程序》
textarea多行输入框。该组件是原生组件,使用时请注意相关限制。
用到的属性:
属性 | 说明 |
maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 |
minlength | 最小输入长度 |
bindinput | 当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 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;
}