小程序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

你們有沒有好的方案；
既可以對字符進行限制有可以獲取正確的值；
發揮大家機智的小腦殼。想想！
拜託各位大佬們了
複製代碼