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