震惊p div 标签 可以编辑高度随内容的编辑而发生变化

震惊p标签可以编辑高度随内容的编辑而发生变化###

1==>只可编辑,粘贴复制字段长度不正常

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 事件会在元素失去焦点时发生。