vue实时监控textarea框输入字数

约定不等于承诺〃 2023-07-13 13:50 31阅读 0赞

1.   **实时监控当前输入字数，直接使用keyup事件方法。**
2.  ** 给输入框加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 = self.payload.content.length;
    		 }
    		},
    		importStart() {
    		 this.cInput = true;
    		},
    		importEnd() {
    		 this.cInput = false;
    		 this.write();
    		}
    
     }
    }
    </script>
    <style>
    	.conter{
    		width:80%;
    		margin: 0 auto;	
    	}
    	.number{
    		width: 100%;
    		text-align: right;
    		margin-top: 20pux;
    	}
    	#textarea{
    		border: 1px solid #f3f3f3;
    		border-radius: 20upx;
    		margin: 20upx 0 0 0;
    		text-indent: 20upx;
    		padding: 10px;
    		
    	}
    </style>

> 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: /images/20230529/a0b89497b5b94f65b637d094369d991d.png