设置contenteditable使span标签为可编辑时，点击红色区域后也会触发焦点事件，理解不了！
contenteditable
设置contenteditable使span标签为可编辑时，点击红色区域后也会触发焦点事件，理解不了！
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
3条回答 默认 最新
- 2025-06-03 16:35敲代码的小吉米的博客 HTML5 提供的全局属性，使元素内容可编辑类似于简易富文本编辑器兼容性支持所有现代浏览器...</ p >< p contenteditable = " true " > 可编辑的段落 </ p >< p contenteditable = " true " > 可编辑的段落 </ p ></
- 2024-03-05 17:44卡布奇诺www的博客 前端常用的输入文本内容便是input与textarea，但是有一些他们有一些局限性，比如input只能输入一行，textarea虽然可以通过设置rows属性来动态调整高度，但是他们都不能存在多种格式的内容，更不能有标签一样样式了。...
- 2025-10-21 21:202501_93895004的博客 通过设置 contenteditable="true"，元素及其子元素变为可编辑状态，适用于富文本编辑器、实时评论等场景。 点击此处可编辑文本 常见问题与踩坑 光标定位异常 动态修改 contenteditable 元素的内容时，光标可能意外...
- 2021-11-19 21:59秦书翔的博客 contentEditable 也就是说给一个元素添加该属性，那么该元素就变成了可编辑的元素，就如同textarea等输入元素。 contenteditable可以让作用于一个元素，那么浏览器可以让该元素变成可编辑的。 如果没有设置该属性的...
- 2025-10-21 21:212501_93894626的博客 contenteditable 属性简介 contenteditable 是 HTML 中的一个全局属性，允许用户直接编辑元素内的内容。通过设置 contenteditable="true"，可以让任何 HTML 元素变为可编辑状态，从而实现简单的富文本编辑功能。这一...
- 2022-07-31 16:11写代码的小王吧的博客 我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEditable属性。
- 2022-01-07 13:28又下雨了啊的博客 对于前端自定义光标样式处理 看另一个大佬的文档“写一个可插入自定义标签的 Textarea 组件”，里面遇到的问题的解决思路 需求问题：我的需求是在富文本里面控制左右移动，富文本是使用的 contenteditable="true"这...
- 2025-07-29 13:55coderszz的博客 contenteditable是HTML中的一个全局属性，它允许用户编辑页面上的内容。 当设置为true或空字符串时，元素变为可编辑； 设置为false时，元素不可编辑。... div contenteditable="true">这里的内容可以编辑
- 2022-03-24 18:02EthanWu1248的博客 这个属性为富文本编辑奠定了基础 ...然则特殊的Safari和iOS又来了，在Safari中加了contenteditable属性无效，不可编辑只有展示 解决方案 -webkit-user-select: auto 我也是百度的，记录一下
- 2025-10-21 21:202501_93895056的博客 实现可编辑列表的基本结构 通过 contenteditable 属性，可以轻松创建一个可编辑的列表。以下是一个简单的 HTML 结构示例： 列表项 1 列表项 2 列表项 3 添加新项 动态添加列表项 通过 JavaScript 动态添加新的可...
- 2025-10-21 21:202501_93895120的博客 </li></ul> 实现示例</h5> 以下是一个简单的 <code>contenteditable</code> 实现示例：</p> <pre> <code class="language-html"><div contenteditable="true" style="border: 1px solid #ccc; padding: 10px;"> 这是...
- 2019-06-11 22:00前端奇妙妙的博客 如果元素未设置contenteditable属性，那么元素会从其父元素继承该属性。 语法结构: <``element contenteditable``=``"true|false|inherit"``> 参数解析: （1）.true:表示元素可以编辑。 （2）.false:表示元素...
- 2025-10-21 21:212501_93894892的博客 contenteditable 的基础语法 该属性接受以下值： true 或空字符串：元素内容可编辑 false：元素内容不可编辑 示例代码： 点击这里可以编辑文本 contenteditable 的常见应用场景 富文本编辑器 结合 document....
- 2025-10-21 21:202501_93895119的博客 例如，禁止用户换行或插入图片： [contenteditable] br, [contenteditable] img { display: none; } 或使用 JavaScript 拦截非法操作： editableElement.addEventListener('keydown', (e) => { if (e.key === 'Enter...
- 2023-06-14 11:00贝塔贝卡贝的博客 contenteditable修改边框样式
- 2025-10-21 21:212501_93894537的博客 contenteditable 是 HTML5 提供的全局属性，允许用户直接在页面上编辑元素内容。为提升编辑体验，可添加 placeholder 提示、自动聚焦和快捷键支持。当用户完成编辑后，需要获取修改后的内容。事件在内容变化时立即...
- 2022-07-26 14:09紫微前端的博客 假设我们希望给定contenteditable元素有一个占位符： 1.使用:empty选择器 我们使用自定义属性 ,data-placeholder来设置占位符： 当元素值为空时，将显示该属性： .editable:empty:before { content: attr(data-...
- 2025-11-13 07:23在前端开发的世界中，HTML5标准引入的contentEditable属性为网页内容的动态编辑提供了便利。contentEditable属性允许开发者将网页上的元素标记为可编辑，从而可以实现类似文本编辑器的效果，用户可以直接在页面上...
- 2024-09-25 18:04十一侍卫的博客 需要获取对应span中的文本时，只需要访问元素的innerHTML属性。对应的CSS样式如下，我用的less方式。
- 没有解决我的问题, 去提问
问题事件
已结题
（查看结题原因） 10月16日-
创建了问题
9月20日