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>

      

标签：字数统计,textarea,innerHTML,文本框,addInremark,65,div,输入,customerComments
来源： https://blog.csdn.net/qq_33242126/article/details/90240184