开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将光标和焦点放在contenteditable div onclick中

基础概念

contenteditable 是一个 HTML 属性，它使得元素的内容可以被用户编辑。当一个 div 元素被设置为 contenteditable="true" 时，用户可以直接在这个 div 中输入文本、编辑内容。

相关优势

用户友好：用户可以直接在页面上编辑内容，无需跳转到其他页面或使用表单。
灵活性：可以用于实现富文本编辑器、在线文档编辑等功能。
集成性：可以与其他 HTML 元素和 CSS 样式结合使用，实现丰富的编辑体验。

类型

contenteditable 可以应用于任何 HTML 元素，但最常见的是应用于 div 和 p 元素。

应用场景

富文本编辑器：如博客编辑器、新闻发布系统等。
在线文档编辑：如 Google Docs、腾讯文档等。
动态内容生成：如在线问卷、动态表单等。

问题及解决方案

问题：将光标和焦点放在 `contenteditable div` 上时，点击事件不生效。

原因

当 contenteditable 元素获得焦点时，浏览器会优先处理编辑相关的操作，导致点击事件可能不会被触发。

解决方案

可以通过 JavaScript 手动设置焦点和光标位置，并确保点击事件能够被正确触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContentEditable Div Focus</title>
    <style>
        .editable-div {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="editable-div" contenteditable="true" id="editableDiv">点击这里编辑内容</div>
    <button onclick="setFocus()">设置焦点</button>

    <script>
        function setFocus() {
            const editableDiv = document.getElementById('editableDiv');
            editableDiv.focus();
            // 确保点击事件能够被触发
            editableDiv.addEventListener('click', () => {
                console.log('Div clicked!');
            });
        }
    </script>
</body>
</html>

参考链接

通过上述代码，你可以确保在点击 contenteditable div 时，焦点和光标能够正确设置，并且点击事件能够被触发。

相关搜索:在Firefox中，使用div contenteditable将光标位置放在末尾在contenteditable div中获取光标位置无法将输入光标焦点放在文本框上 HTML5 contenteditable带有contenteditable=false的子块元素阻止将焦点放在父元素上在Firefox中检查焦点是否在带有contenteditable的div上需要将焦点放在react中的div上将div中的<br />标记替换为contenteditable Ncurses将光标放在正确的面板中在可编辑内容的div中，无法将光标放在非可编辑div的前面如何在vue中的contenteditable div的嵌套节点上捕获焦点事件？将焦点放在JS中返回的元素将焦点放在小div内的表的<tr>内容上 ui更改反应后，将焦点放在元素和位置通过单击按钮将光标放在搜索表单中在UITextView中，iOS将光标放在单词之后 JS输入字段光标焦点(如果它是div中的子元素将侧栏组件放在div中 onClick输入框，将焦点放在输入框上并覆盖在屏幕上如何将div和iframe放在中心位置？如何在单击div class a href按钮时将焦点放在输入元素上

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在可编辑div中定位光标和设置光标

当你点击一个输入框，或者你切换到别的输入框，selection 是会跟着变化的，而光标就是在selection里面，叫做range，是一个片段区域，和selection一样，有开始点和结束点，当我们对文字按下左键向右拉的时候...，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。...DOCTYPE html> 在可编辑div中定位和设置光标...id="edit" contenteditable>div> ...var range = document.createRange(); // 将光标对象的范围界定为新建的表情节点

9.5K2 0

JavaScript 中获取光标位置

1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。...collapseToStart()：取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。...collapseToEnd()：取消当前选区，并将光标定位到原选取的最末位，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。...extractContents()：将range的内容从文档树移动到文档片段中。 insertNode(newNode)：在range的其实位置插入新的节点。...div: div contenteditable="true" class="edit-div" onclick="getCursortPosition(event);

12.5K2 1

document.activeElement

document.activeElement获取当前获得焦点的元素： IE:document.activeElement可获得所有聚焦的元素，包括input、textarea、div等。...IE只关心光标聚焦的位置，不关心聚焦元素的性质。...chrome:document.activeElement仅对input、textarea等标准的输入文本有效；对于div等非编辑类的元素(即使开启了contentEditable)，返回的值为BODY...包括input、textarea、div等。...document.querySelector('body').onclick = function () { console.log(document.activeElement.tagName)

4042 0

造一个 react-contenteditable 轮子

的回答：当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美，咳咳。...那用 div 包裹呢？也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。...onChange={onChange} /> div> ); } 重新再认识一下 contentEditable 属性：一个枚举属性，表示元素是否可被用户编辑。...isFocused) return // 将光标放到最后 const selection = window.getSelection() if (selection !...的组件就完成了，主要实现了： value 和 onChange 的数据流在 componentDidUpdate 里处理光标总是被放在最前面的问题在 shouldComponentUpdate 里添加

1.7K2 0

【富文本】268- 富文本原理了解一下？

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样： div contenteditable="true">div> 那么在这个...div 中我们就可以对其进行任意编辑了。...（或者不知不觉就突然失去焦点了），再执行点击事件，此时没有选区或光标所以会没有效果，这点要留意一下。...操纵光标除了不好对图片进行处理外，光标应该也是一大坑，你可能不知道什么时候就失去焦点了，此时再点击按钮执行命令就无效了；有时你又需要还原或设置光标的位置，比如插入图片后，光标要设置到图片后面等等之类的...由于在 chrome 中，失去焦点并不会清除 Seleciton 对象和 Range 对象，所以就像我一开始说的我没怎么去了解?。。。

2K4 0

【留言板】可编辑输入框操作总结

在class中设元素的display为none后，用js是获取不到此元素的display值的。兼容性有以下几个点：事件的绑定：attacheEvent和addEventListener。...} return datas.join('##'); } 主要内容： range（选区）：IE与标准浏览器的兼容性，值得注意的IE操控选区时，需要让被操控元素（也就是选区所在的元素）获取焦点...标准浏览器range的APi可参考此地址：http://www.w3school.com.cn/xmldom/dom_range.asp 获取数(getContent)：将html结构的数据转换为标准的数据...class="leaveMsgArea" contenteditable="true" id="leaveMsgArea"> div> div class="face-wrap"> div> div> div class="button-group"> onclick="leaveMsg.getContent(event

1.5K10 0

前端富文本基础及实现

如图所示：前端中的富文本前端富文本通过 html 的各个元素配合各种样式（一般是内联样式）实现。例如：富文本编辑器中的富文本，是由红色框中带有语义化标签和内联样式的 html 渲染实现的。...效果如图：元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。该方式是 IE 最早实现的。...将选中文本改为指定字体大小提供 HTML 字体尺寸 (1-7) foreColor 将选中文本改为指定颜色颜色值字符串 formatBlock 将选中文本包含在指定的 HTML标签中提供 HTML...将这些内容汇总即可实现一个简单的前端富文本编辑器。下方附上本文内容汇总的代码 demo ，内含基于 iframe 和 div 元素分别实现的富文本编辑器，功能简单，供读者参考。...br /> // 元素设置 contenteditable 方式 div class="rt-container" contenteditable="true">政采云前端团队div>

4.6K5 0

【Web技术】421- 富文本原理介绍

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样： div contenteditable="true">div> 那么在这个...div 中我们就可以对其进行任意编辑了。...有的同学可能用的不是 button 标签，然后执行命令就会无效，是因为点击其他标签大多都会造成先失去焦点（或者不知不觉就突然失去焦点了），再执行点击事件，此时没有选区或光标所以会没有效果，这点要留意一下...操纵光标除了不好对图片进行处理外，光标应该也是一大坑，你可能不知道什么时候就失去焦点了，此时再点击按钮执行命令就无效了；有时你又需要还原或设置光标的位置，比如插入图片后，光标要设置到图片后面等等之类的...由于在 chrome 中，失去焦点并不会清除 Seleciton 对象和 Range 对象，所以就像我一开始说的我没怎么去了解?。。。

1K2 0

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE

编辑框，textarea，input text的光标位置，兼容FF和IE <script src="http://ajax.googleapis.com/ajax/libs/jquery...= "INPUT") { if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")..." && $(element).attr("contenteditable") == "true")) { element.focus(); rng = document.selection.createRange... div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true...div> div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六七八</span

7.6K6 0

富文本编辑器开发简介

* 区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性。... 关闭富文本编辑 btn1.onclick = function(){box.contentEditable...= true;} btn2.onclick = function(){box.contentEditable = false;} 命令 document.execCommand...collapse(parentNode, offset)：将开始点和结束点合并到指定节点（parentNode）的相应（offset）位置。...> div> div id="editor" contenteditable="true"> div> div> js $(document

4.3K2 0

跨站脚本（XSS）备忘录-2019版

draggable="true" contenteditable>drag mediv>contenteditable>drop here 需要鼠标拖动...draggable="true" contenteditable>drag mediv>contenteditable>drop here 需要作为价值的变化...(1)> 将元素与外部网址一起使用 XSS onclick="VBS:Msgbox+1">XSS onclick="vbscript:Msgbox...+1">XSS onclick="VBSCRIPT:Msgbox+1">XSS onclick="vbscript

6.3K1 0

实现一个简单的编辑器

接管所有事件，有自己的排版引擎 Google Docs 光标 kix-cursor-caret 输入 docs-texteventtarget-iframe contenteditable 金山文档光标...什么是 contenteditable HTML中的 contenteditable 的属性可以打开某些元素的可编辑状态．也许你没用过 contenteditable 属性．甚至从未听说过． contenteditable...的作用相当神奇．可以让 div 或整个网页，以及 span 等等元素设置为可写。...我们最常用的输入文本内容便是 inpu t与t extarea ，使用 contenteditable 属性后，可以在 div , table , p , span , body ,等等很多元素中输入内容...button.innerHTML = tool.icon button.title = tool.title button.setAttribute('type', 'button') button.onclick

1K2 0

HTML5 学习总结（二）——HTML5新增属性与表单元素

menuitem 属性： label：菜单项显示的名称 icon：在菜单项左侧显示的图标 onclick：点击菜单项触发的事件 1.2、contentEditable 规定是否可编辑元素的内容属性值...： true -----可以编辑元素的内容 false -----无法编辑元素的内容 inherit -----继承父元素的contenteditable属性当为空字符串时，效果和true一致。...> contentEditable属性 div contenteditable="true">...Hello contentEditable div> ?...2.1、表单结构更自由在HTML5中表单完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的id值，即可关联起来。 <!

3.5K7 0

2016.07 第3周群问题分享

而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？ contenteditable 属性规定是否可编辑元素的内容。...可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编辑状态，就出现光标了。...如 div contenteditable="true">div> 效果： ? contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。...HTML代码 div class="wrap" contenteditable="true">div> CSS代码 .wrap { width: 400px; min-height...focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件委托，可考虑在FireFox下使用事件流elem.addEventListener(‘focus’, handler, true) 可获得焦点的元素

9498 0

python测试开发django-163.bootstrap-table 表格单元格行内编辑

前言 bootstrap-table 表格行内编辑网上很多资料都是用第三方bootstrap-table-editable.js和x-editable.js实现，不喜欢折腾的用插件实现最快。...table表格 html代码很简单,点个添加一行的按钮，一个提交按钮 div> div> onclick="add_row('table')" type="button..." class="btn btn-info" value="+ 添加"> div> div>... div> div> bootstrap-table 表格初始化...field: field, value: newValue }); 在实际测试过程中，

2K1 0

C#学习笔记——回车Enter使输入焦点自动跳到下一个TextBox

在录入界面中，用户往往需要按回车键时光标自动跳入下一个文本框，以方便录入操作。在C#中实现该功能有多种方法，以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法。...一、利用Windows消息模拟发送Tab键将各个TextBox的TabIndex属性按顺序编号1、2、3……，然后将TextBox的TabStop属性置为True，在每一个TextBox的键盘按下事件中...如果想让焦点跳到任意文本框或者其他地方, 在文本框的键盘按下事件中，将焦点放到目标文本框上。...，直接将焦点转入TextBox2 } } 三、利用控件的SelectNextControl函数按方法一中设置好TextBox的TabIndex和TabStop属性，在C# 回车Enter事件中，调用控件的...TAB键直接用回车键将光标转到下一个文本框的方法在C#.NET中,可以使用JaveScript脚本实现不使用TAB键,而直接用回车键将光标转到下一个文本框。

6.5K1 1

可编辑DIV设置光标位置

所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊，终于可以了，记录一下，网上资料不多. 首先要让DIV启用编辑模式....div contenteditable=true id="divTest">div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。...下面说怎么获取或设置光标位置. 2个步骤 1：获取DIV中的光标位置 2：改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...'character', lyTXT1.innerText.length - cursor); r.collapse(true); r.select(); } 通过上面的我们就可以将DIV...中的光标移动到最后面了..

6.6K4 0

初探富文本之富文本概述

L0 在前边是将当前的编辑器发展归为了L0、L1、L2三个阶段，也有将L0阶段再分两个阶段，总分为四个阶段的，不过由于这两阶段都是完全依赖于contenteditable与document.execCommand...data:text/html, div contenteditable="true">div> 做过文本复制功能的同学应该比较熟悉document.execCommand("copy")这个命令，...contenteditable style="border: 1px solid #aaa;">测试文本加粗选中文字后点击下边的加粗按钮即可加粗div> onclick...当一个Range的起始处和结尾处是同一个位置时，该Range就处于Collapsed状态，也就是我们常见的光标状态。...当进行Undo/Redo操作的时候，将即将要恢复的栈中的内容完全呈现出来。

1.9K1 0

手把手教你实现网页端社交应用中的@人功能：技术原理、代码示例等

： - 在上例中：分别是中的第一个文本节点和 2。...2）endContainer，endOffset —— 结束节点和偏移量： - 在上例中：分别是中的第一个文本节点和 3。...正如我们将看到的，某些 Selection 方法暗示可能有多个范围，但同样，在除 Firefox 之外的所有浏览器中，范围最多是 1。...与范围相似，选择的起点称为“锚点（anchor）”，终点称为“焦点（focus）”。...综上所述：一般我们只有一个 Range，当我们的光标在 contenteditable 的 div 上闪动的时候，其实就有了一个 Range，这个 Range 的开始和结束位置都是一样的。

1.3K1 0

next+react仿微信pc端聊天|Next.js聊天

基于react.js+pc桌面端自定义弹窗组件RLayer 公共布局模块 Next.js中的Head组件用于配置一些页面信息，如：title、keyword、description及icon等信息。...> div> div> div> ) } 聊天模块编辑器支持光标处插入表情、粘贴截图发送、拖拽发送图片等功能...p8.gif // react中实现div的contenteditable功能 return ( div ref={editorRef} className=..."editor" contentEditable="true" dangerouslySetInnerHTML={{__html: state.editorText}}...onClick={handleClicked} onInput={handleInput} onFocus={handleFocus} onBlur

8.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭