100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序 留言板统计字数

微信小程序 留言板统计字数

时间:2018-09-18 21:40:35

相关推荐

微信小程序 留言板统计字数

有道链接:/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});},

这步主要是完成类似双向绑定的效果;

总结

其实效果不难实现,自己有这逻辑也是很容易理解的的,初学者一个,勿喷哦,有什么问题欢迎留言哦!

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