vue实时监控textarea框输入字数

最新推荐文章于 2021-08-04 13:49:24 发布

小红同学5

最新推荐文章于 2021-08-04 13:49:24 发布

阅读量3k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/xh_960125/article/details/104822346

版权

本文介绍如何在Vue项目中使用keyup事件监听textarea输入，动态显示并限制输入字数，通过设置maxlength属性确保不超过预设长度。

摘要由CSDN通过智能技术生成

实时监控当前输入字数，直接使用keyup事件方法。
给输入框加maxlength属性限制长度。

代码

<template>
	<div class="conter">
		<p class="number">输入字数：{
  { conterNum }}/200</p>
		<textarea
			placeholder="点击输入详细原因"
			id="textarea"
			maxlength="200"
			v-on:keyup="content()"
			v-on:compositionstart="importStart()"
			v-on:compositionend="importEnd()"
			v-model="payload.content" 
		></textarea>
		
	</div>
</template>

<script>
  export default {
	  onLoad:function(input){

	  },
	  data(){
		  return{
			  payload:{
				   content: '',
			  },
			
			 conterNum: 0,
			 cInput: false,
		  }
	  },
	  methods:{
		content() {
		 let self = this;
		 if (self.cInput == false) {
		 self.conterNum = s