textarea实现设置最大输入值及监听输入的字数功能

       文本域限制输入字数以及显示已输入的字数往往最常见，话不多说，为了提供方便，已经悄悄将textarea的属性从官网上复制下来了，可供伙伴们参考：

 

 

简单的显示一下做出的功能，样式需要你们自己根据所需改变哦！

 

 如此简单，上代码吧！

<template>
	<view>
		
		<view class="uni-textarea">
			<textarea placeholder-style="color:#A6A6A6" placeholder="请输入！" :maxlength="maxNum"
				@input="GetNumber" />
			<view class="text-count">{
   
   {inputNum}}/{
   
   {maxNum}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxNum:30, //最多输入字数
				inputNum:0 //已输入的字数
			}
		},
		methods: {
			GetNumber(e) {
				console.log(e)
				this.inputNum = e.detail.cursor;
			},
		}
	}
</script>

<style lang="scss">
	.uni-textarea {
		width: 654rpx;
		height: 200rpx;
		background: #F1F3F7;
		border-radius: 16rpx;
		margin: 0 auto;
		.text-count {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #A6A6A6;
			text-align: right;
			margin-right: 20rpx;
		}

		uni-textarea {
			width: 100%;
			height: 160rpx;
			box-sizing: border-box;
			padding: 20rpx 24rpx 0 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #A6A6A6;
			line-height: 40rpx;
		}
	}
</style>

我们可以通过@input事件来监听输入的字数，打印e就很简单明了了，当然如果需要展示的是还剩余多少字可输入的话，自己进行加减就好啦，就不多介绍了， 是不是还挺简单的，希望可以帮助你们！