如何检测可编辑div中光标位置并在该位置插入文本
要检测可编辑div中光标位置并在该位置插入文本，可以使用JavaScript来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>检测光标位置并插入文本</title>
</head>
<body>
<div contenteditable="true" id="editableDiv">可编辑的div</div>
<button onclick="insertText()">插入文本</button>
<script>
function insertText() {
var div = document.getElementById("editableDiv");
var range, selection;
if (window.getSelection) {
// 获取当前选中的文本范围或光标位置
selection = window.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = selection.getRangeAt(0);
range.deleteContents(); // 清空选中的内容
// 创建一个新的文本节点
var textNode = document.createTextNode("要插入的文本");
range.insertNode(textNode);
// 移动光标到插入的文本后面
range.setStartAfter(textNode);
range.collapse(true);
// 清空选中的内容并将光标移动到插入的文本后面
selection.removeAllRanges();
selection.addRange(range);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = "要插入的文本";
range.collapse(false);
range.select();
}
}
</script>
</body>
</html>上述代码中，我们首先创建了一个可编辑的div，并给其设置了一个id。然后在按钮的点击事件中，通过JavaScript获取到当前选中的文本范围或光标位置。接着，我们清空选中的内容，并创建一个新的文本节点，将要插入的文本作为文本节点的内容。然后，将新的文本节点插入到选中的位置，并将光标移动到插入的文本后面。最后，清空选中的内容并将光标移动到插入的文本后面，以确保插入的文本处于光标位置。
这种方法适用于大多数现代浏览器。如果需要兼容旧版的Internet Explorer浏览器，可以使用document.selection来获取文本范围和光标位置。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCAS）：https://cloud.tencent.com/product/tbcas
- 腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我正在使用咖啡脚本，并尝试在内容可编辑div中的光标位置插入文本。我使用Tim Dowan函数来获取光标位置。每当div游标位置中的类型发生变化，但我不确定如何更新updateTextArea函数中的变量时，当我运行该函数时，我会得到相同的游标位置。有没有更好的方法解决这个问题？# Get curret position in
浏览 20提问于2019-06-26得票数 1
我正在研究一种使用JavaScript在HTML文本中创建注释的方法。它的工作方式是，用户点击一个内容可编辑的<div>，我就会根据他们点击的位置得到光标的位置。然后，当我在文本中放置注释时，我转到该字符位置以插入脚注指示符。问题是光标在可内容编辑的<div>中的位置没
浏览 2提问于2016-03-30得票数 1
我看过很多代码片段，详细介绍了如何在一个可内容编辑的div中获取和设置插入符号的位置，但我无法让它在我的例子中工作：
我使用的是所见即所得的文本编辑器(textAngular)。我已经为用户提供了在光标位置插入交叉引用的功能。他们点击一个按钮，这将打开一个对话框，让他们从中进行选择，这反过来将在当前光标位置插入
浏览 0提问于2015-01-26得票数 2
我正在尝试在Windows窗体应用程序中构建一个简单的HTML文本编辑器。我希望能够以编程方式检测文本光标在特定时刻的位置，这样我就可以以编程方式在该点插入文本。我本以为这是显而易见的事情，就像获取或设置当前文本光标位置的属性一样，但我还没有找到！那么我如何找出光标在哪里呢？
浏览 0提问于2012-06-28得票数 0
回答已采纳
我正在使用一个内容可编辑的div，它可以选择在文本流中有内联html元素，例如标记“”。
在某些点上，我需要获取内容可编辑div的插入符号位置(游标位置)，插入符号(游标)是在html子元素之后。我在javascript中使用了以下代码--它可以正确地找到可内容div的插入符号位置(游标位置)，但由于window.getSelection未定义，
浏览 0提问于2012-05-31得票数 4
回答已采纳
1回答
我目前正在开发一个web应用程序，在该应用程序中，我将有一个具有可编辑文本区列表的页面，我希望能够更改它们的顺序，只需将每个文本区拖放到想要的位置。基本上，这些文本区域中的每一个都嵌套在一起，如下所示： <div>
</textarea>
浏览 3提问于2012-08-01得票数 2
回答已采纳
1回答
我是JavaScript的新手，希望这里的人能在以下方面帮助我：
主要寻找IE8中的解决方案-如果它能更好地涵盖其他浏览器/版本的话。我有一个只有一个可内容编辑div的页面，它是动态创建的，包含文本和HTML标记。在页面上，我想添加一个按钮，在光标位置插入特定的文本到这个div中。到目前为止，我有下面的代码，只要我在div中选择一个文本就可以很好地工作，
浏览 2提问于2013-10-28得票数 2
1回答
我想在光标位置后追加文本。例如:当用户将光标移动到文本字段的中间位置时。我想要获取文本上的光标位置，然后在光标位置之后添加文本。 我尝试了文本编辑控制器，但我不能到达光标位置。如何检测文本字段上的光标位置？
浏览 31提问于2021-01-10得票数 3
回答已采纳
2回答
我使用以下函数在光标所在的位置插入文本：
var sel, range; var el = document.createElement("div然后我有：
$("span").click(funct
浏览 2提问于2013-05-16得票数 1
1回答
我正在编写一个内容可编辑的DIV自动完成程序(需要在文本框中呈现html内容)。因此，我更喜欢使用contenteditable而不是TEXTAREA)。现在，我需要在DIV中有keyup/keydown/click事件时找到光标位置。这样我就可以在该位置插入html/文本。我不知道如何通过计算找到它，或者有没有本机浏览器功能可以帮助我找到内容可编辑的
浏览 87提问于2010-02-06得票数 17
1回答
我有一个文本框，输入了一些文本。此外，我有一个可拖的div，我可以拖放在我的文本框。删除时，将此div的内容作为文本插入到文本框(附在末尾)中。现在，我希望能够操纵文本框中的光标，使其跟随鼠标位置，文本被插入到它被删除的确切位置。
我已经有了鼠标x和y，我知道如何进行
浏览 6提问于2015-11-30得票数 1
回答已采纳
我有一个拼写检查解决方案，它使用内容可编辑的div，并在拼写错误的单词周围插入span标记。每次更新div的内部html时，光标都会移动到div的开头。我知道，如果用户在句子末尾添加新单词(下面的代码)，我可以将光标移动到div的末尾。var sel = window.getSelection();sel.addRange(range);
但是，如果用户在句子中间添加单词，则无法保留<e
浏览 5提问于2017-04-21得票数 18
4回答
如何(使用jquery或其他)在可内容编辑div的光标/插入符号位置插入html：例如，如果光标/插入符号在"hello“和"world”之间，然后用户点击一个按钮，例如“插入图
浏览 4提问于2010-05-30得票数 6
我正在使用jQuery创建一个小型的HTML编辑器。我创建了自己的按钮图标：
粗体:当用户单击此按钮时，应将编辑器框()中选定的文本替换为<b> ..selected_text.. </b>。否则，在光标位置插入<b></b>。斜体:
浏览 0提问于2012-01-03得票数 0
回答已采纳
我正在编辑器中开发一个实时协作编辑器，在编辑器中的某个位置插入文本时，我找不到任何文档。<div ui-ace="aceOptions" ng-model="content"></div>
在角度控制器中</em
浏览 5提问于2017-08-23得票数 1
回答已采纳
我有一个问题，我需要在div中插入一个文本(字符串，可能有也可能没有html标签)。它必须是一个div，而不是一个文本区域。请参阅以下网址：。注意如何在div中</em
浏览 0提问于2008-10-31得票数 9
3回答
我想做一个简单的java程序，将插入一些文本到当前光标位置。该光标位置可以在任何文本编辑器中，例如记事本。这个是可能的吗？
浏览 0提问于2009-10-10得票数 0
回答已采纳
我有一个可满足的div：和jQuery代码： $('#ftext').append($('#htmtext').val());如何将代码从#h
浏览 4提问于2015-12-29得票数 1
回答已采纳
我试图了解是否/如何使用jQuery UI可删除插件将对象放到特定游标位置的容器中。<div id="cart">
<h1 class="ui-widget-header">
浏览 0提问于2011-04-22得票数 0
我正在使用一个内容可编辑的div构建一个非常简单的富文本编辑器。如果用户在div内单击，然后单击链接管理器按钮，然后在模式弹出中输入一些链接文本和地址，然后单击OK，我希望构建一个超链接并将其插入到div中先前选定的光标位置。我尝试捕获所选的范围并缓存它(通过div onblur事件)，然后将我的新内容插入到该范围中</
浏览 0提问于2019-07-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
