uniapp里textarea多行文本输入限制数量

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

javascript 复制代码
<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>
相关推荐
coding随想几秒前
深入浅出HTML5 CSS类扩展:getElementsByClassName和classList属性
前端·css·html5
程序视点3 分钟前
电脑硬件检测必备!图吧工具箱11年免费良心软件!100+免费工具合集
前端·windows·后端
随笔记14 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
陈随易24 分钟前
国产之光,把AI融入到语言级别的编程语言-MoonBit
前端·后端·程序员
鹏程十八少34 分钟前
9. Android 精通Android高级UI总结:自定义View与动画开发终极实战指南
前端
上单带刀不带妹38 分钟前
ES6中import与export的用法详解
开发语言·javascript·es6·import·export
xianxin_39 分钟前
HTML 区块
前端
江城开朗的豌豆40 分钟前
让页面"记住自己"——前端状态保留实战技巧
前端·javascript·vue.js
xianxin_41 分钟前
HTML 布局
前端
一千柯橘1 小时前
Milkdown:重塑 Markdown 编辑体验的开源利器【实时预览你的 markdown 内容】倍儿爽!
前端·开源·markdown