如何实现
<div contenteditable="true">可以编辑里面的内容</div>
Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性 主要通过为标签添加HTML5中的contenteditable属性达到此效果(contenteditable:规定是否允许用户编辑内容),很棒的是,此属性IE也会支持,所以不用再为兼容问题太去纠结了
上代码:
<div
class="txt-word"
contenteditable="true"
placeholder="请输入文字信息"
ref="divTxt"
@input="wordNumber('txt')"
></div>
<p class="txt-rest">
<span
>{
{ txtContent.length ? txtContent.length : 0 }}/{
{ wordNum }}</span
>
</p>
</div>
data
wordNum: 600, // 最多多少字
txtContent: "", // 文字数量
methods
// 文字信息
wordNumber() {
var txtContentleng = this.$refs.divTxt.innerHTML;
this.txtContent = this.$refs.divTxt.innerHTML;
this.wordNum = 600 - txtContentleng.length;
},
效果
修改样式在下篇噢~~