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

发布时间:2022-01-14 发布网站:https://www.cnblogs.com/IwishIcould
前端之家收集整理的这篇文章主要介绍了震惊p div 标签 可以编辑高度随内容的编辑而发生变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

总结


以上是前端之家为你收集整理的震惊p div 标签 可以编辑高度随内容的编辑而发生变化全部内容,希望文章能够帮你解决震惊p div 标签 可以编辑高度随内容的编辑而发生变化所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。