小程序textarea不是你想的那样

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

1.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

你们有没有好的方案；
既可以对字符进行限制有可以获取正确的值；
发挥大家机智的小脑壳。想想！
拜托各位大佬们了
复制代码