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;
    },

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值