关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应
<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高度自适应的更多相关文章
- vue中使用对非表单元素使用contenteditable的问题
先说下问题,再上解决方案: span编辑时有多余空格和回车会影响样式(我用的是span便以此为例) 代码:(有换行符) 效果图: 代码:(无换行符) 效果图: 当在span标签的contentedit ...
- jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- <div>标签仿<textarea>。contentEditable=‘true’,赋予非表单标签内容可以编辑
需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
- html5新增表单元素
1.验证 <form> <input type="email"></input> 验证邮箱 <input type="ur ...
- form表单元素的值序列化成对象
/** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...
随机推荐
- 6.AND & OR 运算符
AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤 AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 A ...
- python之yield函数
yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法. 只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: def addlist( ...
- jquery dropdownlist.js
$.fn.extend({ SetDict: function (option) { var txtControl = $(this); if (!txtControl.hasClass(" ...
- HttpRuntime.Cache
a.在Web开发中,我们经常能够使用到缓存对象(Cache),在ASP.NET中提供了两种缓存对象,HttpContext.Current.Cache和HttpRuntime.Cache,那么他们有什 ...
- Python基础入门-While循环
讲完了for循环我们继续来看第二个循环,那就是while循环,while循环和for循环虽然都是循环,但是有着本质的不同.我们先来看下她们之间的区别和联系: While循环和for循环区别: 1.fo ...
- Java Random、ThreadLocalRandom、UUID类中的方法应用(随机数)
1.Random:产生一个伪随机数(通过相同的种子,产生的随机数是相同的): Random r=new Random(); System.out.println(r.nextBoolean()); S ...
- 《深度学习原理与TensorFlow实践》喻俨,莫瑜
1. 深度学习简介 2. TensorFlow系统介绍 3. Hello TensorFlow 4. CNN看懂世界 5. RNN能说会道 6. CNN LSTM看图说话 7. 损失函数与优化算法 T ...
- HackTwo
使用延迟加载以及避免代码重复 一.概要: <include />标签是整理布局的有效工具,提供了合理组织XML布局文件的有效方法. ViewStub是实现延迟加载视图的优 ...
- 较为复杂的 GraphQL 查询实现
一.实现功能首页各类排行榜加载数据: 向下遍历子节点并展开: 1.展开过程中动态加载简介summary.书类bookType: 2.book对象上包裹Rank节点,描述book对象在不同排行榜下所处位 ...
- C#多线程编程实战1.6线程优先级
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...