微信小程序-textarea字数统计与限制
展开
第一步：参考官方文档《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.value
let 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;
}
————————————————
版权声明：本文为CSDN博主「chibimarukochan」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/88659746
