需求:
文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现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文本框 输入文字高度自适应 且实现字数统计和限制》对你有帮助,请点赞、收藏,并留下你的观点哦!