可能很多小伙伴們。看見這個標題后;
覺得作者是一個標題黨。
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
大家有沒有好的方案；
既能夠對字符進行限制有能夠獲取正確的值；
發揮你們機智的小腦袋。想一想！
拜托各位大佬們了
