如何在 contenteditable div 中的特定位置添加/插入/更新文本？
在 contenteditable div 中的特定位置添加/插入/更新文本的方法有很多种，以下是一些常用的方法：
- 使用 innerHTML
通过使用 innerHTML，可以在 contenteditable div 中直接插入 HTML 代码。例如：
<div id="content" contenteditable="true">
<p>Hello, world!</p>
</div>
<script>
var content = document.getElementById("content");
content.innerHTML = "<p>Hello, world!</p>";
</script>这种方法比较简单，但是存在一些安全隐患，例如容易受到 XSS 攻击等。
- 使用 textContent
textContent 属性是 contenteditable 元素的一个只读属性，表示元素的文本内容，不包括 HTML 标记。可以使用 textContent 来插入文本。例如：
<div id="content" contenteditable="true">
<p>Hello, world!</p>
</div>
<script>
var content = document.getElementById("content");
content.textContent = "Hello, world!";
</script>这种方法比 innerHTML 更安全，但是插入的文本不会包含 HTML 标记。
- 使用 createTextRange
createTextRange 方法可以创建一个文本选区，可以使用 select 方法来插入文本。例如：
<div id="content" contenteditable="true">
<p>Hello, world!</p>
</div>
<script>
var content = document.getElementById("content");
var range = document.createRange();
range.selectNodeContents(content);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
content.focus();
</script>这种方法可以在 contenteditable div 中插入文本，并且可以插入多行文本。
以上是一些常用的方法，当然还有其他的方法可以插入文本，具体可以根据实际情况选择。需要注意的是，在插入文本之前，需要先选择要插入的位置，可以使用 select 方法来选择。另外，在插入文本之后，需要将文本设置为 focus 状态，以便用户可以编辑。
相关·内容
10回答
我找到了大量关于如何在contentEditable元素中设置插入符号位置的跨浏览器的好答案，但没有一个是关于如何首先获得插入符号位置的。
我想要做的是知道keyup的div中插入符号的位置。因此，当用户输入文本时，我可以随时知道contentEditable</em
浏览 115提问于2010-10-20得票数 149
回答已采纳
HTML代码如下所示我必须在上面div中的特定位置插入一些基于某些事件的新文本。例如，它说所以div应该变成
<d
浏览 1提问于2012-04-25得票数 5
我正在寻找一些好的实践例子来改变文本区域的颜色在react js 我看过一些在textarea上添加div的例子，但是如何以一种反应的方式做到这一点呢？
浏览 39提问于2020-09-24得票数 0
如何在可内容div中的第一行文本之后插入换行符(换行)，以便在对元素进行聚焦时，插入符号位于下一行的开头？此外，至少火狐和Chrome在点击Enter (返回)后将现有内容和添加的文本包装在子div中，从而消除了插入的<br>。<<
浏览 6提问于2021-12-10得票数 0
我正在用html+js编写一个类似于Soulver的应用程序。我需要从输入自定义文本(突出显示)。对于输入，每次在div中输入之后，使用<div contenteditable="true"></div>的im都会出现新的div。我如何分配id给它。或者用\n覆盖所有内部div，就像在textarea中一样。有什么想法吗？
浏览 0提问于2011-03-31得票数 0
回答已采纳
如何在div中显示闪烁的光标(允许通过键盘进行文本选择)，但将其保持为只读(不允许文本输入)？
我知道我可以将contentEditable设置为启用div上的游标，但是用户可以编辑内容。我尝试将contentEditable和readonly添加到div中，但似乎readonly只在输入元素上有效，比如textarea或input。我还尝试使用文本</e
浏览 0提问于2019-02-15得票数 5
回答已采纳
我想在按键事件中插入HTML标记。我是jQuery和JavaScript的新手，我也在寻找这个东西，但却没有答案。我知道append和selectionStart方法，但我想插入文本光标的位置$("#textcontent){
$("#textcontent").ap
浏览 2提问于2021-08-18得票数 2
回答已采纳
给定一个如下所示的contentEditable div：如何将光标设置在位置6，紧跟在is中的s之后？window.getSelection().getRangeAt(0);savedRange.startOffset =
浏览 0提问于2011-11-03得票数 3
回答已采纳
2回答
我有一个可以满足的方面：使用innerHTML，我得到了“这是一个例子现在在第7位(在“is”之后)，我想添加html (<span class="yup">NOT</span>)来给出以下内容(或者使用click，focus什么-不使用)
浏览 1提问于2016-12-09得票数 2
回答已采纳
我需要知道我的光标在contenteditable div上的什么位置。<div class="contenteditable" contenteditable="true">
<div></div</em
浏览 0提问于2014-07-29得票数 0
3回答
如果我以编程方式删除内容可编辑div的焦点，它看起来就没有焦点，但是如果用户输入它仍然有焦点。这不会发生在文本输入上。我想我可以给出另一个文本输入焦点，但是我必须动态创建它，聚焦它，并销毁它。至少可以这么说.
浏览 0提问于2015-09-11得票数 9
回答已采纳
我想将选定的文本从一个内容div移到另一个内容div。并且所选文本应追加到另一个div的当前插入符号位置。有没有办法获得基于div id的护理位置？我观察到，在所有的资源中，获得的插入符号位置总是基于选择。<body >
<div contenteditable="
浏览 1提问于2015-12-09得票数 0
1回答
我有一个可满足的div，需要在插入位置添加div(子)？该怎么做呢？var appendText = "<div class='ui-state-default&#x
浏览 3提问于2013-07-25得票数 3
回答已采纳
因此，我正在创建一个HTML界面，用户应该能够编写文本并将其作为通知推送给我们的移动应用程序。文本可以包含特殊元素，如:电话号码、位置和网站URL。这些特殊元素将通过按下打开对话框的按钮来插入，并显示每个对话框的特定字段，比如用于Web和移动电话的位置和输入字段的google地图。无论如何，除了
浏览 4提问于2020-10-09得票数 0
1回答
我是JavaScript的新手，希望这里的人能在以下方面帮助我：
主要寻找IE8中的解决方案-如果它能更好地涵盖其他浏览器/版本的话。我有一个只有一个可内容编辑div的页面，它是动态创建的，包含文本和HTML标记。在页面上，我想添加一个按钮，在光标位置插入特定的文本到这个div中。到目前为止，我有下面的代码，只要我在<
浏览 2提问于2013-10-28得票数 2
<div id="editor" contenteditable="true"></div>
ev
浏览 0提问于2018-11-16得票数 0
我有一个contentEditable div，它允许用户键入文本，以及插入输入元素，比如文本框和下拉列表。通过允许用户单击可编辑div之外的按钮，元素将被插入到光标当前所在的位置。我让它运行得很好，下面是一个一般的例子：
document.selection.createRange().pasteHTML(html);
问题是，它希望HTML被传递到函数中，该
浏览 2提问于2016-06-08得票数 1
回答已采纳
我有一个带有contenteditable的div，里面有一个链接： <a id="a">[$special.value$]</a>如果用户单击末尾的字段并开始键入，则新文本将插入到<a>中，而不是插入到它之后。<a>之外<e
浏览 38提问于2018-06-14得票数 1
2回答
下面是一个例子： <div class="display">Blah blah blah?</div></div>
<br /><br />
浏览 0提问于2015-06-13得票数 2
回答已采纳
1回答
我有这个问题，我已经在中尝试过了。我有contenteditable，其中是简单的html --只有一个文本和一个<B>元素。我的问题是，当插入符号位于<B>元素内的某个位置时，用户按下"X“键。然后，<B>元素被成功解开，但是插入符号改变了位置并移动到解开的<B>元素的开头。
我希望插入符号不改变它<em
浏览 0提问于2012-05-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
