有道链接:/noteshare?id=b69890057706e8f78093baece664c45d&sub=817B86B1330044ABAEEF26D35681DFEC
介绍
我们在做微信小程序有时需要统计用户在输入时的字数,从而做一些判断,这里以留言板为例,来看看如何实现的吧!
效果如下:
内容为空时:
输入时:
一、wxml页面
textarea输入表单
<textarea name='content' maxlength="{{max_liuyan_len}}"value="{{liuyan}}" placeholder="请输入留言" bindinput="inliuuyan"></textarea>
属性解释:
name:表单提交时给内容起的名字,
maxlength:最大输入长度,
value:该表单的值(不知道为什么没有双向绑定),
placeholder:为空时的提示语句,
bindinput:输入内容时触发的事件
具体可参考官网:https://developers./miniprogram/dev/component/textarea.html
text标签
<text>{{liuyan.length}}/{{max_liuyan_len}}</text>
解释:
liuyan.length:当前已输入的字符长度
max_liuyan_len:允许输入的最大长度
二、js页面
data定义变量:
data: {liuyan: '', // 留言内容max_liuyan_len: 30, // 留言内容最大长度},
输入留言绑定的事件:
inliuuyan(e){// e.detail.value 输入框里的值this.setData({liuyan: e.detail.value});},
这步主要是完成类似双向绑定的效果;
总结
其实效果不难实现,自己有这逻辑也是很容易理解的的,初学者一个,勿喷哦,有什么问题欢迎留言哦!