震惊p标签可以编辑高度随内容的编辑而发生变化###
1==>只可编辑,粘贴复制字段长度不正常
<p contenteditable="true" >这是一个可编辑内容的p</p>
2==>既可编辑,又可粘贴复制,文本字段长度正常
<p contenteditable="plaintext-only" >这是一个可编辑内容的p</p>
3==>div变成可以编辑的方法跟上面的一样哈,下面就不做叙述了。
解决编辑p标签出现的淡蓝色边框###
p{
outline: none;
}
如何获取p标签编辑后的内容 失去焦点后就可以获取p便签中的值###
html###
<div id="app">
<p id="pcontent" contenteditable="true" ref="pvalue" @blur="addBlur">22323</p>
</div>
methods: {
addBlur(){
console.log(document.querySelector("#pcontent").innerText);
}
},
为什么不使用@change事件进行监听了。因为change事件只适用于表单元素,
而p div这一类元素不可以使用@change事件
注意:当用于 select 元素时,change 事件会在选择某个选项时发生。
当用于 text field 或 area 时,change 事件会在元素失去焦点时发生。