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

【小程序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 comcomfrom "./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大家有没有好的方案；既能够对字符进行限制有能够获取正确的值；发挥你们机智的小脑袋 。想一想！拜托各位大佬们了

作者：流年少年
出处：https://www.cnblogs.com/ishoulgodo/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ??ω??)っ???！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ??ω??)っ???！
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ??ω??)っ???！

文章插图

文章插图
微信本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。