在寫小程序的過程之前，我們經(jīng)常能遇到輸入?yún)^(qū)域的字?jǐn)?shù)限制問題，今天就來看一下如何限制textArea的字?jǐn)?shù)

實(shí)現(xiàn)效果

wxml

<view class="xinxi"><textarea placeholder='請(qǐng)?zhí)峁┰敿?xì)的設(shè)備故障信息' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"><text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text></textarea> </view>

js

Page({data: {min: 0,max: 20,},inputs: function (e) {var value = e.detail.value;var len = parseInt(value.length);if (len > this.data.max) return;this.setData({currentWordNumber: len});if(this.data.currentWordNumber == 20){wx.showModal({title: '提示',content: '您輸入的次數(shù)已達(dá)上限',})}} })

wxss

.xinxi {width: 690rpx;height: 360rpx;border-radius: 8rpx;margin: 28rpx auto;border: 2rpx solid #e5e5e5;box-sizing: border-box;position: relative; } .xinxi >textarea {width: 638rpx;height: 360rpx;padding: 26rpx 26rpx 0rpx 26rpx; } .currentWordNumber {position: absolute;bottom: 40rpx;right: 26rpx;color: #888; } 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的微信小程序textArea组件字数限制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。