文档章节

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

o
 osc_g8254g7s
发布于 2019/08/19 17:26
字数 188
阅读 29
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前言

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

一、项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息发送/动态表情,图片/视频预览,拖拽图片/粘贴截图...

osc_h9fpkpv6
01/09
36
0
electron/vue可编辑框contenteditable|仿微信截图

基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能 为了避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 作为脚手架工具,加上拥有 的 、 或是...

xiaoyan2015
01/07
0
0
高度自适应的输入框

  有时候我们需要一个高度能随内容自动增加的输入框, 显然不行,因为 里的文字是不换行的。文本域 里的文字倒是换行的,可一旦文字内容超过其高度, 就会增加一个烦人的滚动条,这是很影响...

osc_fted3syf
04/16
2
0
Vue学习记录

new Vue({ el:"#id", //绑定元素 data:{ // 数据 }, methods:{ //方法集 } }); 1、针对标签内容 直接 {{ lab }} ,如果需要调用方法 {{ function() }} 2、针对属性可以用,属性绑定: v-bind...

无敌小学僧
2019/06/27
47
0
用div模拟文本域实现高度自动撑开以及相关问题的解决方法

前段时间项目里面用到了一个高度随着内容自动撑开的文本域效果,这一点传统的textarea标签是满足不了的,而我们要做的只是在div中加一个contenteditable="true"的属性,以下是现实效果。 但是...

logan_lg
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

事务特性

ACID ACID : 原子性 - 一致性 - 隔离性 - 持久性 四大特性 原子性: 事务将一组逻辑单元看成 一个操作 , 原子是最小单位不可再分割 一致性: 事务的前后 数据的应该保持一致 隔离性(isolation)...

osc_3grma05a
1分钟前
0
0
微信小程序实现分享到朋友圈

2020年7月8日。微信小程序推出分享朋友圈,所以笔者先来试一下,没想到一下搞成了 。。 按照微信官方文档得第一步,我们需要设置允许发给朋友,在小程序得生命周期里面这样写。 首先,把你的...

osc_a8r2ub9u
3分钟前
0
0
小程序分享到朋友圈 H5打开小程序H5打开APP 「wx-open-launch-weapp」 「wx-open-launch-app」

前言 微信更新了两个功能块 简单使用了下 给大家写篇文章说说 避免走弯路 欧力给! 1.小程序分享到朋友圈 //在页面的js里设置下就ok onShareTimeline(){ return { title: "微视宝...

osc_dwuu5jqk
3分钟前
0
0
解决死锁——哲学家就餐

解决方法有: 1、更改为单个锁 2、将锁排序 产生死锁的原因 产生死锁的原因是一个线程在持有一把锁时又去申请另外一把锁,也就是锁嵌套。而另一把锁被另外一个线程持有。 举个广为人知的例子...

osc_2qah5avr
5分钟前
0
0
面试官:软件测试没搞懂这些,哪里来的自信投简历? 刁钻问得高频的面试题(含答案)

问得高频的问题(含答案) 软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试...

测试人追风
5分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部