zoukankan      html  css  js  c++  java
  • div contenteditable 代替Textarea,做成Vue属性动态绑定

    前言

    一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定

    <div contenteditable=true placeholder="添加描述符" class="shut-down"></div>

     css

    .shut-down:empty:before{
        content:attr(placeholder);
        font-size: 13px;
        color: #999;
    }
    .shut-down:focus:before{
        content:none;

    2.通过vue来实现双向绑定

    input 的实现是这样的

    input的双向绑定

    <input v-model="something">

    改变的双向绑定

    <input :value="something" @input="somthing=$event.target.value"

    参照上面的我们来实现div的可编辑和双向绑定

    <div contenteditable="true" v-text="content" @input="handleInput" class="shut-down">
      
    </div>

    js 部分

    export default {
      data() {
        return {
          content: ''
        }
      },
      methods: {
        handleInput($event){
          this.content = $event.target.innerText;
         
          // 拓展 如果想要只需要前100位数据
          this.content = this.content.substring(0,100)
        }
      }
    }

    这样 就不用textarea 来绑定啦,H5新特性 ,完美

  • 相关阅读:
    002-mybatis主配置文件
    001-mybatis框架
    mybatis学习
    tcp连接与释放
    浏览器输入url的全过程
    设备
    读写分离(三)
    读写分离(二)
    读写分离(一)
    主从复制(三)
  • 原文地址:https://www.cnblogs.com/yf-html/p/11378405.html
Copyright © 2011-2022 走看看