小程序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
大家有没有好的方案;
既能够对字符进行限制有能够获取正确的值;
发挥你们机智的小脑袋。想一想!
拜托各位大佬们了
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体