需求：

文本框可根據輸入內容高度自適應，不帶滾動條，高度可變的那種，我搜索了很多，發現textarea無法實現我的需求，scrollHeigh這個無法獲取實際內容的高度（我用的是那種簡單的，可能我寫的哪里不對吧；那種代碼很多的，我又不想那么去做，麻煩。。。），所以只能div模擬textarea文本框了。

使用div模擬textarea文本框，輸入文字高度自適應，且實現字數統計和限制，輸入字數超出65時，統計數字會變紅，作為提示，當div失去焦點時，字數會剪切為最大限制字數65。

// 可實現div模仿文本框進行編輯 contenteditable="true"

其實，本來實時限制用戶輸入字數，也就是當用戶輸入字數達到65時，不允許再次輸入，體驗會更好。但是當我這樣做時，div里的光標會跑到div的最前面，再次輸入時導致后面字被剪切掉，我無法獲取和定位光標，所以只能設置當blur,失去焦點時，再剪切字數（當然，光標的獲取和定位應該可以實現，有需求的小伙伴，可以自己試試 ^_^）。

效果圖：

? ? ? ? ? ? ? ?

HTML:

<div class="add-doss-retpl"><div>意向備注 <span class="c-gy"><span :class="addTotal > 65 ? 'hx-red' : ''" > {{addTotal}}</span>/65</span></div><div class="add-doss-foremark" id="add-doss-foremark" @input="addDossInput($event)" @blur="addDossBlur($event)" contenteditable="true"></div> </div>

CSS:?

.add-doss-retpl{background-color: #fff;padding: 10px;.add-doss-foremark{width:100%;margin: 10px 0;border:#e1e1e1 solid 1px;padding: 10px 8px;}.hx-red{color:red;}}

?VUE.js:

<script>export default {data:function(){return {addInremark:'', // 意向備注addTotal:0, // 統計輸入框里的字數}},activated:function () {this.addInremark = (JSON.parse(sessionStorage.getItem('customerComments')) || JSON.parse(sessionStorage.getItem('customerComments'))=='') ? JSON.parse(sessionStorage.getItem('customerComments')) : (this.$route.query.customerComments?this.$route.query.customerComments:'');// 輸入框賦初始值document.getElementById('add-doss-foremark').innerHTML = this.addInremark;this.getAddTotal(); // 字數統計},watch:{// 監聽意向備注（統計字數&&存儲）'addInremark'(){this.getAddTotal();sessionStorage.setItem('customerComments', JSON.stringify(this.addInremark));},},beforeRouteEnter(to, from, next){if (from.name == "dossCustomer" || from.name == "clientDetail" ) {sessionStorage.removeItem('customerComments'); }next();},methods:{// 監聽意向備注輸入addDossInput(e){this.addInremark = e.target.innerHTML;},// 監聽意向備注失去焦點addDossBlur(e){if(e.target.innerHTML.length > 65){this.addInremark = e.target.innerHTML.slice(0,65);let addRe = document.getElementById('add-doss-foremark');addRe.innerHTML = this.addInremark;}else {this.addInremark = e.target.innerHTML;}},// 字數統計getAddTotal(){this.addTotal = this.addInremark.length;}}} </script>

?

總結

以上是生活随笔為你收集整理的div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。