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

posted @   南风晚来晚相识  阅读(735)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示