uniapp里textarea多行文本输入计数

最新推荐文章于 2024-06-25 15:20:54 发布

lmy云棉

最新推荐文章于 2024-06-25 15:20:54 发布

阅读量2.9k

点赞数 4

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_43340308/article/details/126769978

版权

uniapp里textarea多行文本域实现输入计数

效果图：

这是我自定义的，其他的可以看：Textarea 文本域 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/components/textarea.html

完整vue代码：

<template>
	<view class="inputs">
		<textarea class="text1" maxlength=50 placeholder='请输入...' @input="sumfontnum"></textarea>
		<text class="text2">{{fontNum}}/50</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fontNum:0
			}
		},
		methods: {
			// 限制文本框字数
			sumfontnum(e) {
				console.log(e)
				this.fontNum = e.detail.value.length
			}
		}
	}
</script>

<style scoped>
	.inputs{
	   height: 170rpx;
	   border: 2rpx solid #EAEAEA;
	   border-radius: 10rpx;
		 padding-top: 34rpx;
		 padding-left: 35rpx;
		 padding-right: 35rpx;
	}
	.text1{
		width: 100%;
	   color: #000000;
		 height: 130rpx;
	   font-size: 26rpx;
	  
	}
	.text2{
		height: 40rpx;
		line-height: 40rpx;
	   color: #000000;
	   font-size: 20rpx;
	   float: right;
	   margin-top: -10rpx;
	}
</style>