在前端开发中，经常需要使用可编辑的 div 元素来实现富文本编辑器等功能。但是在向其中插入元素后，如何设置光标位置却是一个常见的问题。
插入元素后光标位置的问题
假设我们有一个可编辑的 div 元素，并且想要在其中插入一个按钮。我们可以使用以下代码：
---- ------------- ----------------------- -------- --- --- ------ ------- -------------------------------- -------- ----- -------- - ------------------------------------ ----- ------ - ----------------------------------------- -------------------------------- -- -- - ----- ---------- - --------------------------------- -------------------- - --------- --------------------------------- --- ---------
这样就会在可编辑的 div 中插入一个按钮。但是，当我们点击插入按钮后，光标位置会跑到 div 的末尾，而不是在插入的按钮后面。
这是因为插入节点后，浏览器默认将光标放在了新插入节点的前面。如果我们想要使光标位置在插入节点后面，就需要手动设置光标位置。
设置光标位置的方法
使用 range 和 Selection 对象
在 contentEditable 元素中，我们可以通过 Range 和 Selection 对象来控制文本选中范围和光标位置。具体来说，我们可以创建一个 Range 对象，将其起点设置在新插入节点的后面，终点也设置在同一个位置，然后将该 Range 对象赋值给 Selection 对象即可。
----- ----- - ----------------------- -------------------------------- ------------------------------ ----- --------- - ---------------------- ---------------------------- --------------------------
这样就可以将光标位置设置在插入节点的后面了。
使用 TextNode 和 Range 对象
除了使用 Selection 对象以外，我们还可以通过遍历节点树，找到插入节点之后的 TextNode 节点，并将其作为 Range 的起点和终点，从而设置光标位置。
以下是一个示例代码：
-------------------------------- -- -- -
----- ---------- - ---------------------------------
-------------------- - ---------
---------------------------------
-- --------- -------- --
--- ----------- - -----------------------
----- ------------ -- ----- -
-- --------------------- --- -------------- -- ------------------------------ - -- -
------
-
----------- - ------------------------
-
-- ------------ -- ----- -
----- ----- - -----------------------
--------------------------- ---
---------------------
----- --------- - ----------------------
----------------------------
--------------------------
-
---总结
本文介绍了在 contentEditable div 中插入元素后如何设置光标位置的两种方法：使用 Range 和 Selection 对象，以及遍历节点树找到 TextNode。这些方法可以帮助开发者更好地掌控可编辑内容的光标位置，提升用户体验。
在实际项目中，我们也可以结合输入法事件等相关技术手段，进一步优化光标位置的处理逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31354