可编辑div光标位置

最新推荐文章于 2025-05-22 09:49:33 发布
最新推荐文章于 2025-05-22 09:49:33 发布
阅读量4.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liyujia6636/article/details/54728719
本文介绍了在可编辑div中实现光标定位的技术，包括使用Window的getSelection API获取选区，通过getRangeAt获取range对象，以及如何利用startOffset和endOffset确定光标位置。还提到在不同浏览器中的兼容性，如兼容IE9+，谷歌和火狐。当div失去焦点时保存range对象，重新聚焦时使用removeAllRanges和addRange恢复之前的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

MDN上提示这些API不稳定。应该是兼容IE9+，谷歌，火狐

1. var sel = window.getSelection()  变量sel是当前页面被选中区域

2. var objRange = sel.getRangeAt(0) 获得选中区域的range对象

   startOffset和endOffset代表了选中区域的起始位置和结束位置，相同时代表了光标位置

  anchorNode有2个值，一个是输入框节点，一个是文本text。

  anchorNode为输入框节点时，startOffset代表了在文本框中的位置，一段文字看成一个整体相当于只占一个位置，一个表情算一个位置。

3. objRange.rangeCount表示选中区域的range对象数量
4. sel.removeAllRanges()可以移除选中区域的range对象

5. document.createRange()可以创建新的range对象

6. sel.addRange(range)可以给选中区域添加range对象


基本思路：

当可编辑div失去焦点时，要记录当时的range对象，赋值给一个变量lastRange

当可编辑div重新获得焦点，会有一个默认range对象，startOffset和endOffset都为0

使用sel.removeAllRanges()可以移除选中区域的range对象

使用sel.addRange(lastRange)可以给选中区域添加当时保存的lastRange对象


别人家的详细解释和示例：https://segmentfault.com/a/1190000005869372


山外人家
关注
html div 光标位置,JS在可编辑的div中的光标位置插入内容的方法
weixin_31295867的博客
06-04 830
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：首先要让DIV启用编辑模式通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。不扯话题了。下面说怎么获取或设置光标位置.2个步骤：① 获取DIV中的光标位置② 改变光标位置var cursor = 0; // 光标...
DIV可编辑模式在光标位置插入内容
06-10
NULL 博文链接：https://canlynet.iteye.com/blog/2340751
FastColoredTextBox中文修正版V2：让代码显示更稳定准确
最新发布
gitblog_06789的博客
05-22 611
FastColoredTextBox中文修正版V2：让代码显示更稳定准确 【下载地址】FastColoredTextBox中文修正版V2介绍 FastColoredTextBox中文修正版V2是一款专为中文开发者优化的代码高亮文本框，基于原版FastColoredTextBox进行了深度改进。该版本重点解决了中文显示不清...
在可编辑div中定位光标和设置光标
热门推荐
分享前端工程化、动效魔法与性能之舞！
03-03 1万+
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。 当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开.........
可编辑DIV光标定位
weixin_30522095的博客
10-20 619
可编辑DIV光标定位 为何需要光标定位 当一个DIV标签添加contenteditable=“true” 的属性值的时候，就会将该标签变成一个可编辑的输入框，如果仅是输入文字，完全可以满足需求，但是当我们要插入一张图片的时候（如表情），那么这时候我们将无法知道我们将表情图片插入到哪个位置中，这时候就需要记录DIV中的光标的位置，方便下次插入。 下面介绍的主要是微信网页中出现的问题：div可编辑框每...
可编辑的DIV（兼容IE8）以及插入内容到光标位置
canlynetsky的博客
12-19 2177
在做web版聊天程序时，往往需要将一个DIV设置为可编辑状态，并且可以插入表情。 插入表情时，不仅仅是在输入的文字最后追加表情，还可能在输入文本的中间，即光标位置插入表情（光标后还有文本）。 另外，还需要保证粘贴进来的文字必须是纯文本，不然百度搜索一篇文章粘贴进来，就太乱了。我们希望输入的文本都是纯文本，只有最基本的p标签或div标签。 通过各种百度搜索，我在项目中成功实施。 现将项目中的技
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
以上就是在Vue项目中实现可编辑div光标位置插入内容的基本步骤。需要注意的是，由于浏览器之间的兼容性问题，可能需要对不同的浏览器进行适配。同时，为了提高用户体验，还可以考虑添加更多的交互细节，比如拖动元素...
JS在可编辑的div中的光标位置插入内容的方法
10-25
关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点： 1. 可编辑的div（contenteditable）：HTML5新增了一个全局属性contenteditable，它可以使网页元素变得可编辑。通过将contenteditable设置...
可编辑DIV 光标位置 处理
weixin_30815427的博客
08-06 264
//场景： 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情，那么textarea就不能满足需求了，因为textarea内没有办法加入image// 采用方案是使用可编辑的DIV（也就是 一般 DIV的 contenteditable 属性为 true）// 但是发现添加表情或者插入图片之后，光标不会随着移动到末尾 图片和表情 采用的 append方式 添加的htm...
INPUT、TEXTAREA以及DIV中控制光标的位置
reedseutozte的专栏
07-24 4352
设置以及获取光标位置在Textarea和Input中如下获得光标函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行. IE分支:函数中的Sel变量是整个文档的可选区域,所以需要做一个循环,使得Sel区域中的文本中的最后一段文本和文本框中的文本做到最长匹配,其偏移量为光标的位置function getCaretPos(element) { var CaretPos = 0; // IE Support if (document.se
关键字提示编辑器一之可编辑div获取光标位置
weixin_43069875的博客
11-22 2185
没有考虑浏览器兼容性，暂时只考虑了Chrome。 效果 在div中输入的时候，底下的蓝色部分（span）跟随光标变化而变化，而且内容为光标前的所有文本。 红色的部分是一个|，用来模拟光标。所以只要获得|的相对像素位置，以及div的位置，就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。 div获取光标位置比较复杂，如果是textarea和input框，内部是纯文本，比较好处理。 div中输入的时候，第一行输入的内容是div的第一个文本元素。换行之后，每一行都会自动被一个d
div可编辑，插入元素获取光标，getSelection()对象操作
m0_67108146的博客
05-14 2935
div可编辑，插入元素，获取光标位置，设置光标位置
div光标
weixin_30312557的博客
11-12 98
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
可编辑div中如何在光标位置添加内容
技术之家 www.5ceo.cn
11-09 610
原文：https://www.5ceo.cn/wyl/blogs/detail/1000131.html
html div 光标位置,ContentEditable div-在更新内部html之后设置光标位置
weixin_42512723的博客
06-04 430
// some mock logic to identify spelling errorconst errorWords = ["helloo", "dudeee"];// Find words from string like ' Helloo world .. '// Perhaps you could find a better library you that does this...
div contenteditable 的光标定位（仿input的maxlength）
jeremygeng的博客
02-24 1872
div contenteditable 的光标定位（仿input的maxlength） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
js中对可编辑的div进行光标位置插入内容，和移动光标到最后
hhy1006894859的博客
05-07 7044
直接上代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
[代码片段] 如何在contenteditable的div中设置和获取光标位置？
GBin1中文互联
08-15 4011
如果需要在contenteditable的div中获取当前光标的位置，可以尝试如下代码：  function createRange(node, chars, range) { if (!range) { range = document.createRange() range.selectNode(node); range.se...
html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决
06-06
对于可编辑的div元素，你可以使用selection和range对象来定位光标位置，并在指定光标处插入html代码。 以下是一个示例代码： ``` // 获取可编辑div元素 var editableDiv = document.getElementById("editable"); // 获取选区对象 var selection = window.getSelection(); // 创建range对象 var range = document.createRange(); // 将range对象定位到可编辑div元素的末尾 range.setStart(editableDiv, editableDiv.childNodes.length); range.collapse(true); // 将选区对象设为创建的range对象 selection.removeAllRanges(); selection.addRange(range); // 在当前光标位置插入html代码 var html = "<p>要插入的html代码</p>"; var fragment = range.createContextualFragment(html); range.insertNode(fragment); ``` 请注意，上述代码中的`editable`应替换为你的可编辑div元素的id。同时，你可以根据需要调整range对象的起始位置，以定位光标的位置。 希望这可以帮助你解决问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值