当前位置: 首页 - 编程技术 - 文章正文

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

xiaoqihv
效果 代码 

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>

文章地址:https://wenmayi.cn/post/1158.html