小程序textarea设置maxlength后不是你想的那样简单

可能很多小伙伴们。看见这个标题后; 觉得作者是一个标题党。 textarea设置maxlength后, 限制用户输入的字符呗！ 还能怎么样呢？ 恭喜你，说对了一半。 之前我也一直是这样想的。 知道今天我写小完程序后自己测试。 发现textarea设置maxlength后， 并不是我们想的那样简单： 它是一个'有故事的组件' 我们来看一下这面这一段代码功能: 限制textarea的值最多输入6字符, 点击按钮获取用户的输入的值。 

<template>    <view class="content" > 	<view class="cont">留言内容</view> 	   <textarea class="my-custom"  placeholder-class="updata-pl" 			placeholder="请输入口号内容(最多输入6个字)"  			v-model="formPraise.praiseCont"  			maxlength="6" 		/> 		<view class="bottom-btn"> 			<button type="primary" class="button-btn" @tap="gotos">获取值</button> 		</view> 	</view> </template> <script> export default {  data() { 	return {            formPraise:{ 	       praiseCont:'' 	   } 	}    },    methods: { 	gotos(){ 	console.log('超出后==>',this.formPraise.praiseCont) 	},    } } </script> 

根据上面这一张动态图， 我们发现了在textarea显示的值， 与我们获取的值不一样。不一样，真不一样。 重要的事情说三遍。 我最初以为是开发工具缓存值或者出问题了。 重启了一次，发现textarea设置maxlength="6" 我们输入的值与获取的值真的不一样！ textarea设置maxlength后哪是一个‘有故事的属性’ 分明就是一个‘有事故的属性’。 为什么会出现这样的情况?  因为:textarea设置maxlength="6"后, 当我们输入的值超过6时，我们删除又进行输入。 这样多重复几次。 就导致了我们视图上的值与我们获取的值不一致了。 这个时候，有机智的小伙伴可能会说： 我们使用ref通过节点获取内容。 这样视图和输出来的内容不就一致了。 不就可以解决了嘛？ 感觉说的有道理，我们尝试一下: 

2.通过ref获取值

我们知道，在uni-app开发小程序; uniapp的ref属性不能用在uniapp的内置组件上面， 只能用在自定义组件上面 所以我们创建一个组件com-com.vue 

子组件 <template> 	<view class="solo-name"> 		<view class="soko">表彰说明</view> 		<textarea class="my-custom" 			placeholder="请输入口号内容(最多输入6个字)" 			maxlength="6" 			ref="vref"                    placeholder-class="updata-pl" 			v-model="formPraise.praiseCont" 		/> 	</view> </template> 

页面使用 <template> 	<view class="content" > 		<com-com ref="comref"></com-com> 		<view class="bottom-btn"> 			<button type="primary" class="button-btn" @tap="gotos">                         获取值                     </button> 		</view> 	</view> </template> <script> import comcom  from "./com-com.vue" export default {    components:{ 	'com-com':comcom     },     methods: { 	gotos(){ 	console.log('获取值==>',this.$refs.comref.praiseCont) 	},     } } </script> 

当看完上面这张动态图的时候； 我们发现通过ref获取去的值仍然是失败的。 为啥视图上显示的值与我们获取的值不一致呢？  我们在视图上添加一个view组件。 用它显示我们输入的值的内容 它的值与textarea绑定的值是一样的。 我们康康下面这一个案例也许你就明白了 

3.设置maxlength到底发生了什么事？

<template> 	<view class="content" > 		<view class="cont">留言内容</view> 		<textarea class="my-custom"  placeholder-class="updata-pl" 			placeholder="请输入口号内容(最多输入6个字)"  			v-model="formPraise.praiseCont"  			maxlength="6" 		/> 		<view class=""> 			{{ formPraise.praiseCont}} 		</view> 		 		<view class="bottom-btn"> 			<button type="primary" class="button-btn" @tap="gotos">获取值</button> 		</view> 	</view> </template> <script> export default {   data() { 	return { 	   formPraise:{ 		praiseCont:'' 	   } 	}   },   methods: { 	gotos(){ 		console.log('超出后==>',this.formPraise.praiseCont) 	},		   } } </script> 

4.抱歉我也不知道maxlength到底发生了什么事

说真的，我不号用语言去描述设置maxlength； 它到底发生了什么事情。 但是我知道当textarea设置maxlength后， 当值只要出现超出并且后一个覆盖了前面的值。 就会出现视图上显示的值与获取值不一致。 这是我得到的结论. 如果各位小伙伴又不一样的看法 欢迎说出来，你的观点对我很重要。 

5.textarea不设置maxlength会这样嘛？

<template>     <view class="content" >         <view class="cont">留言内容</view>         <textarea class="my-custom"  placeholder-class="updata-pl" 		placeholder="请输入内容"  		v-model="formPraise.praiseCont" 	 	/> 	<view class="bottom-btn"> 	    <button type="primary" class="button-btn" @tap="gotos">                 获取值             </button> 	</view>    </view> </template> <script> export default {     data() {         return {             formPraise:{                praiseCont:''             }         }     },     methods: {         gotos(){            console.log('超出后==>',this.formPraise.praiseCont)         },		     } } </script> 

6.textarea的maxlength默认值是140

我们发现没有设置textarea不设置maxlength时。 值仍然会丢失。 其实你虽然没有设置maxlength这个属性。 但是maxlength有一个默认值140。 也就是说你虽然没有设置值。 但是组件给了你一个默认值。  如果textarea设置maxlength值后； 不想让值丢失；可以将maxlength=-1; 这样值就不会进行丢失了。 但是达不到限制字数的效果。 

有些小伙伴说： 我们可以先将maxlength=-1； 然后用户输入内容的时候； 我们判断用户输入值大于6的时候。 就进行截取。 感觉这个办法可行。赶紧尝试一下。 

7.通过截取限制用户输入的值

<template>     <view class="content" >         <view class="cont">留言内容</view>         <textarea class="my-custom"  placeholder-class="updata-pl" 		placeholder="请输入内容"  		v-model="mess"  		@input="changehander" 	/> 	<view class="bottom-btn">             <button type="primary" class="button-btn" @tap="gotos">                获取值             </button> 	</view>     </view> </template>  <script> export default {     data() {         return {              mess:'',         }     },     methods: {         gotos(){                 console.log('超出后==>',this.mess)         },         changehander(){             if(this.mess.length>6){                 this.mess=this.mess.substr(0,6);                 console.log('被执行了')             }         },     }, } </script> 

8.如何解决这个问题呢？

我们发现仍然是不行。 虽然值没有丢失。 但是没有进行对输出的值进行限制。  后来我使用watch对数据进行监听。 如果发现字数超出6个长度的时候进行截取。 但是仍然不行;  不仅unia-pp会出现，原生小程序也会出现。 我猜测taro也会出现； 因为这本身就是小程序的一个bug  大家有没有好的方案； 既能够对字符进行限制有能够获取正确的值； 发挥你们机智的小脑袋。想一想！ 拜托各位大佬们了