textarea input 限制長度 實時監聽
阿新 • • 發佈:2019-01-07
<div class="input">
<textarea @input="descArea" name="" id="" cols="30" rows="10" v-model="textareaDesc" placeholder="請填寫備註資訊,如:需帶個人簡歷、身份說明"></textarea>
<p>{{zero}}/{{max}}</p>
</div>
<script> export default { name: 'invitation', data() { return { list: ['待查閱', '已查閱', '已購買', '已邀約', '不合適'], textareaDesc: '', zero: '0', max: '400' }; }, methods: { descArea: function () { console.log(this.textareaDesc.length); console.log(this.textareaDesc); this.zero = this.textareaDesc.length; if (this.textareaDesc.length > 400) { this.zero = 400; this.textareaDesc = this.textareaDesc.slice(0, 401); } } } }; </script>
話不多說直接上圖,首先,監聽 textarea 的內容變化,我們可以用input方法,因為我們是vue專案,所以 textarea 的vule 我們換成 v-model ,這樣方便資料互動。
然後我們限制長度(限制字數,我這裡是400),思路就是,獲得輸入的內容的長度,即 this.textareaDesc.length ,判斷該長度是否超過400 ,如果超過400,我們就擷取0-400之間的,超過400的不予顯示,要顯示選定的元素 ,就用slice(start,end),這裡要注意,start是包含的,end則是不包含的,就相當於,你要是要擷取3個字元,那就得 slice(0,4)。
以上就是限制長度啦,本文方法對 input 和 textarea 都適用