<template>
   <div ref="sendContent" contenteditable="true" v-html="sendContent" @keyup.shift.enter="sendMsg" style="min-height:50px;border:1px solid black;"></div>
<button @click="clearTextarea">清空输入框的值</button>
</template>
<script>
export default {
data () {
return {
sendContent: ''
}
},
methods: {
sendMsg () {
let content = this.$refs.sendContent.innerHTML
if ((content.length) > 1200) {
alter('您输入的内容过长,无法发送')
return false
}
this.$emit('send', this.sendContent)
},
clearTextarea: function(){
//无效 this.sendContent = '';
this.$refs.sendContent.innerHTML = '';
}
}
}
</script>

参考文章:

https://segmentfault.com/a/1190000012146952

关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应的更多相关文章

  1. vue中使用对非表单元素使用contenteditable的问题

    先说下问题,再上解决方案: span编辑时有多余空格和回车会影响样式(我用的是span便以此为例) 代码:(有换行符) 效果图: 代码:(无换行符) 效果图: 当在span标签的contentedit ...

  2. jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

  3. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  4. <div>标签仿<textarea>。contentEditable=‘true’,赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...

  5. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  6. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  7. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  8. html5新增表单元素

    1.验证 <form> <input type="email"></input>    验证邮箱 <input type="ur ...

  9. form表单元素的值序列化成对象

    /** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...

随机推荐

  1. 6.AND & OR 运算符

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤 AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 A ...

  2. python之yield函数

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法. 只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: def addlist( ...

  3. jquery dropdownlist.js

    $.fn.extend({ SetDict: function (option) { var txtControl = $(this); if (!txtControl.hasClass(" ...

  4. HttpRuntime.Cache

    a.在Web开发中,我们经常能够使用到缓存对象(Cache),在ASP.NET中提供了两种缓存对象,HttpContext.Current.Cache和HttpRuntime.Cache,那么他们有什 ...

  5. Python基础入门-While循环

    讲完了for循环我们继续来看第二个循环,那就是while循环,while循环和for循环虽然都是循环,但是有着本质的不同.我们先来看下她们之间的区别和联系: While循环和for循环区别: 1.fo ...

  6. Java Random、ThreadLocalRandom、UUID类中的方法应用(随机数)

    1.Random:产生一个伪随机数(通过相同的种子,产生的随机数是相同的): Random r=new Random(); System.out.println(r.nextBoolean()); S ...

  7. 《深度学习原理与TensorFlow实践》喻俨,莫瑜

    1. 深度学习简介 2. TensorFlow系统介绍 3. Hello TensorFlow 4. CNN看懂世界 5. RNN能说会道 6. CNN LSTM看图说话 7. 损失函数与优化算法 T ...

  8. HackTwo

    使用延迟加载以及避免代码重复 ​一.概要:     <include />标签是整理布局的有效工具,提供了合理组织XML布局文件的有效方法.     ViewStub是实现延迟加载视图的优 ...

  9. 较为复杂的 GraphQL 查询实现

    一.实现功能首页各类排行榜加载数据: 向下遍历子节点并展开: 1.展开过程中动态加载简介summary.书类bookType: 2.book对象上包裹Rank节点,描述book对象在不同排行榜下所处位 ...

  10. C#多线程编程实战1.6线程优先级

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...