vue使用div写一个文字域（textarea）怎么写？？？（contenteditable=“true“属性让div+css可以相当于Input）

如何实现

<div contenteditable="true">可以编辑里面的内容</div>

Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性主要通过为标签添加HTML5中的contenteditable属性达到此效果（contenteditable：规定是否允许用户编辑内容），很棒的是，此属性IE也会支持，所以不用再为兼容问题太去纠结了

上代码：

     <div
        class="txt-word"
        contenteditable="true"
        placeholder="请输入文字信息"
        ref="divTxt"
        @input="wordNumber('txt')"
     ></div>
       <p class="txt-rest">
         <span
           >{
   
   { txtContent.length ? txtContent.length : 0 }}/{
   
   { wordNum }}</span
         >
       </p>
    </div>

data

wordNum: 600, // 最多多少字
txtContent: "", // 文字数量

methods

    // 文字信息
    wordNumber() {
      var txtContentleng = this.$refs.divTxt.innerHTML;
      this.txtContent = this.$refs.divTxt.innerHTML;
      this.wordNum = 600 - txtContentleng.length;
    },

效果
在这里插入图片描述
修改样式在下篇噢~~

vue使用div写一个文字域（textarea）怎么写？？？（contenteditable=“true“属性让div+css可以相当于Input）

猜你喜欢