微信小程序~textarea字数限制与计算

先看效果图，是不是自己想要的

1、在textarea中绑定bindinput事件。
2、通过var value = e.detail.value;获取textarea的值。
3、通过 var len = parseInt(value.length);获取textarea的长度。
wxml:

<view class="conts"><textarea class="areas" placeholder='留下点评，帮助更多人' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"></textarea><text class="hint">{{texts}}</text><text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text>
</view>

wxss:

.conts{width:90%;height: auto;/* border: 1rpx solid red; */position:relative;padding-bottom:50rpx;margin:0 auto;}
.areas{width:100%;height:152rpx;font-size: 30rpx;text-indent: 28rpx;border: 1rpx solid gainsboro;padding-top: 30rpx;margin: 0 auto;overflow: hidden;   position: relative;
}
.currentWordNumber{font-size: 28rpx;color: gray;position: absolute;right:10rpx;bottom:10rpx;
}
.hint{font-size: 28rpx;position: absolute;left:20rpx;bottom:10rpx;color: #FF6600;
}

js:

Page({data: {texts: "",min: 5,//最少字数max:22, //最多字数 (根据自己需求改变) },//字数限制  inputs: function (e) {// 获取输入框的内容var value = e.detail.value;// 获取输入框内容的长度var len = parseInt(value.length);//最少字数限制if (len < this.data.min){this.setData({texts: "加油，至少要输入5个字哦"})}else if (len >= this.data.min){this.setData({texts: " "})}//最多字数限制if (len > this.data.max) return;// 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行this.setData({currentWordNumber: len //当前字数  });}
})

微信小程序~textarea字数限制与计算相关推荐

微信小程序-textarea字数统计与限制
第一步:参考官方文档<textarea小程序> textarea多行输入框.该组件是原生组件,使用时请注意相关限制. 用到的属性: 属性说明 maxlength 最大输入长度,设置为 - ...
微信小程序输入框字数限制以及计算
wxml代码如下: <textarea class="textarea-bg font_s33 font_c31" id="information" ma ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
微信小程序 textarea 简易解决方案
微信小程序 textarea 简易解决方案参考文章: (1)微信小程序 textarea 简易解决方案 (2)https://www.cnblogs.com/bsyblog/p/6116973.ht ...
微信小程序 textarea浮动键盘弹不出来错误
参考网址:https://www.shangmayuan.com/a/e8923d8f81c04fe6983f8eff.html 微信小程序textarea组件问题: 部分用户使用悬浮键盘时,会弹不出 ...
关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
小程序textarea字数限制与输入计算
微信小程序--文本域字数限制和字数输入统计示例代码 wxml:<textarea bindinput='input' rows="3" placeholder=" ...
input层级高小程序_微信小程序textarea层级过高(盖住其他元素)问题的解决办法...
1.首先,textarea为微信小程序原生组件,其层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 2.解决方法: 方法一:可通过官方提供的标签嵌套view或 ...
微信小程序自定义相机拍照，计算大小，以及上传
需求:近来微信小程序有个需求,自定义相机拍照,并且要在相机中画一个框,提示用户把拍摄内容放入框中,类似于上传身份证时那个头像,国徽对其的框.(因为我们上传的是一份A4纸的病例),所以需要这样.然后后台 ...

微信小程序~textarea字数限制与计算

微信小程序~textarea字数限制与计算相关推荐

最新文章

热门文章