div contenteditable 代替Textarea，做成Vue属性动态绑定

最新推荐文章于 2024-07-03 15:32:35 发布

angliliu2521

最新推荐文章于 2024-07-03 15:32:35 发布

阅读量1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yf-html/p/11378405.html

版权

前言

一般都是用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新特性，完美

转载于:https://www.cnblogs.com/yf-html/p/11378405.html