1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > div模拟textarea文本框 输入文字高度自适应 且实现字数统计和限制

div模拟textarea文本框 输入文字高度自适应 且实现字数统计和限制

时间:2024-01-07 23:14:00

相关推荐

div模拟textarea文本框 输入文字高度自适应 且实现字数统计和限制

需求:

文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。