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>

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

div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
div模拟textarea文本域轻松实现高度自适应
2019独角兽企业重金招聘Python工程师标准>>> .app-box-content { min-width: 400px; min-height: 120px; ...
vue实现textarea框，文字高度自适应
vue实现textarea框,文字高度自适应,https://blog.csdn.net/qq_38128179/article/details/103591717 下面是两种方式,注释掉的是一种,不 ...
jq实现文字个数限制_js实现文本框输入文字个数限制代码
html: 课程评价 0/5 js: var contentBox = document.getElementById('comment_content'); var max = +document. ...
div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
已解决selenium模块向网页input文本框输入内容失败问题
已解决(selenium向input文本框输入内容失败问题)selenium.common.exceptions.ElementNotInteractableException: Message: e ...
Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
java textfield 文字居中_java.awt.TextField和TextArea：文本框和文字区控件
在 Java AWT 内有两个与文字输入有关的类 TextField(文本框控件)和 TextArea(文本区控件),它们之间的差异在于: TextField 文本框只能输入单行文本: TextAre ...

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

需求：

HTML:

CSS:

VUE.js:

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

最新文章

热门文章