1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序---文本域输入带最大字数限制

微信小程序---文本域输入带最大字数限制

时间:2019-12-07 09:32:23

相关推荐

微信小程序---文本域输入带最大字数限制

效果

代码

js

Page({/*** 页面的初始数据*/data: {min: 0,max: 100,explain: '', //说明password: ''},/*** 生命周期函数--监听页面加载*/onLoad(options) {},inputeExplain(e) {var value = e.detail.value;let dataset = e.currentTarget.dataset;this.data[dataset.obj] = value;var len = parseInt(value.length);if (len > this.data.maxAddr) return;this.setData({currentWordNumber: len});if (this.data.currentWordNumber == 100) {wx.showModal({title: '提示',content: '您输入的次数已达上限',})}},})

wxss

/* */.inputBox {width: 100%;/* height: 76rpx; */display: flex;box-sizing: border-box;/* padding: 0 20rpx; */font-size: 28rpx;font-family: PingFang SC;font-weight: 400;}.textarea2 {width: 100%;min-height: 200rpx;max-height: 400rpx;line-height: 40rpx;background-color: #f6f6f6;font-size: 32rpx;font-family: PingFang SC;font-weight: 400;/* padding: 20rpx 0; */padding: 20rpx;box-sizing: border-box;/* line-height: 60rpx; */color: #2B2B36;position: relative;margin-top: 30rpx;}.currentWordNumber {position: absolute;bottom: 24rpx;right: 26rpx;color: #888;}

wxml

<!-- 输入框 --><view class="inputBox"><textarea class="textarea2" auto-height minlength="{{min}}" maxlength="{{max}}" placeholder="请输入邮寄地址" placeholder-class="phcolor" bindinput="inputeExplain" data-obj="explain" value="{{explain}}"><text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text></textarea></view>

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