在contenteditable true div内将插入符号设置为contenteditable false span后面
在contenteditable为true的div内，将插入符号设置为contenteditable为false的span后面，可以通过以下步骤实现：
- 首先，确保你已经创建了一个contenteditable为true的div元素，例如：<div contenteditable="true" id="editableDiv"></div>
- 使用JavaScript获取到该div元素，并在其内部插入一个contenteditable为false的span元素，同时将插入符号设置在span元素后面。可以使用以下代码实现：var divElement = document.getElementById("editableDiv"); var spanElement = document.createElement("span"); spanElement.contentEditable = "false"; divElement.appendChild(spanElement);
- 最后，你可以在span元素后面插入其他内容，例如文本或其他元素。可以使用以下代码实现：var textNode = document.createTextNode("在span后面插入的文本"); spanElement.appendChild(textNode);
这样，你就成功将插入符号设置为contenteditable为false的span后面。
关于contenteditable属性，它是HTML5中的一个属性，用于指定元素是否可编辑。当设置为true时，元素的内容可以被用户编辑；当设置为false时，元素的内容不可编辑。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：腾讯云云服务器（CVM）
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用程序。详情请参考：腾讯云云数据库MySQL版
- 腾讯云人工智能平台（AI Lab）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等。详情请参考：腾讯云人工智能平台（AI Lab）
- 腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网应用。详情请参考：腾讯云物联网平台（IoT Hub）
- 腾讯云移动应用分析（MTA）：提供全面的移动应用数据分析服务，帮助开发者深入了解用户行为和应用性能。详情请参考：腾讯云移动应用分析（MTA）
相关·内容
我使用将文本值呈现到contenteditable DOM节点中。例如：
var data = [{
value: 'Hello '
},{
value: 'World!'
}];
var component = React.createClass({
render: function () {
var pieces = this.props.data.map(function (piece) {
return (
<span contentEditable="false">
浏览 1提问于2014-08-01得票数 13
回答已采纳
1回答
考虑下面的contenteditable元素
<div contenteditable>
Foo bar <span contenteditable="false"></span>x</div>
现在，这里发生的好事情是，无论你使用什么浏览器，如果你点击里面的某个地方，插入符号总是放在x后面。
但是，因为我不想把x放在行尾，而你又去掉了x，所以插入符号的位置是不同的(safari和Edge做了一些奇怪的事情)。因此，我认为当contenteditable的最后一行以不可编辑的span结尾时，您会遇到问题，所以我这样做了
浏览 14提问于2016-08-28得票数 0
3回答
我有一个contenteditable元素，当插入符号在其中时，我希望元素内部应用一个样式。
在本例中，:hover上的样式发生了变化
div{
caret-color: red;
}
span:hover {
font-weight:bold;
}
<div contenteditable="true">
<span>Sub element one</span>
text node
<span>sub element two</span>
</div>
在这里，您可以看到插入符
浏览 0提问于2018-04-19得票数 7
回答已采纳
我正在开发一个简单的语法高亮笔，它用类替换文本和dom元素。
比如说，我有一个
<div contenteditable="true">
Some text. | And some other text.
</div>
并且光标位于|管道上
//如果用户输入foo
<div contenteditable="true">
Some text. foo| And some other text.
</div>
//并替换它，然后在插入的元素之后设置选定内容
<div contenteditable=&#
浏览 0提问于2012-05-11得票数 2
回答已采纳
我的插入符号不是在跨度之间进行的，下面是示例
回复
我所有的跨度都粘在一起，所有的跨度都是contenteditable="false"，我的主要div是contenteditable="true"。
问题->插入符号不是在这些跨度之间，而是在所有跨度之前或在所有跨度之后。
<div id="variable-message-input-message" class="variable-message__compose" contenteditable="true" name="mess
浏览 1提问于2019-10-24得票数 0
1回答
下面的函数会使插入符号移回开头。在函数被调用后，我如何让它停留在相同的位置？
function highlightText() {
var mystring = document.getElementById("writeArea").textContent;
mystring = mystring.replace(/function/g , "<span class=\"func\">function</span>");
document.getEl
浏览 0提问于2017-09-17得票数 0
如何在子contentEditable div之外的contentEditable div内键入内容，而不保留子级的类，并且不将contenteditable更改为false。
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
应该是这样：
<div class =
浏览 7提问于2014-03-24得票数 0
在一个contenteditable true div中，可以将插入符号/光标设置在具有contenteditable false的span后面吗？
示例：
$('#straightHtml').html('<p><span contenteditable="false">test</span></p>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">&l
浏览 1提问于2017-06-09得票数 0
我使用一个内容可编辑的div结合HTML库在光标位置插入。
最后，div的内容通常如下所示：
<div contenteditable="true">
"Hello "
<button contenteditable="false" data-id="147">@John Smith</button>
" "
</div>
用户在按下“@”时会得到建议，并随后在被选中时作为一个按钮插入(ala Google Plus)。我还在这个按钮后面插入了
浏览 2提问于2012-04-03得票数 8
回答已采纳
1回答
我有一个内容丰富的div，里面有文本。
<div contenteditable="true"><span> Some text.. </span></div>
我需要插入代替插入关闭和打开跨度标签。比如：
<div contenteditable="true"><span> Some </span><span> text.. </span></div>
我试着用insertHTML做的：
document.execCommand('i
浏览 2提问于2014-10-24得票数 1
回答已采纳
我的任务是设置一个文本插入符号，使其出现在contentEditable div中的一个空跨度节点内。
以下是我在Firefox 3.6上没有遇到的问题：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery
浏览 94提问于2010-10-31得票数 20
回答已采纳
上下文为Chrome 37.0.2062.120 m。
我使用execCommand将html插入到一个可编辑的div中。我的execCommand调用如下所示：
function insertHTML(){
document.execCommand('insertHTML', false, '<span id="myId">hi</span>');
}
当可编辑div如下所示时：
<div contenteditable="true">
some [insertion poin
浏览 0提问于2014-09-20得票数 21
回答已采纳
我的任务是在当前插入符号位置的contentEditable div中插入一个空span节点。
下面给出的Firefox 22.0没有问题：
<div class="parent" contentEditable=true>
<div>text</div>
</div>
Javascript
$('.parent').on("keyup", function(e){
if (e.which == 73) {
node = '<span class=
浏览 1提问于2013-07-09得票数 6
1回答
我有这个问题，我已经在中尝试过了。我有contenteditable，其中是简单的html --只有一个文本和一个<B>元素。我的问题是，当插入符号位于<B>元素内的某个位置时，用户按下"X“键。然后，<B>元素被成功解开，但是插入符号改变了位置并移动到解开的<B>元素的开头。
我希望插入符号不改变它的位置，并保持在samoe位置。有可能吗？最好使用解决方案？
为了回答这个问题，代码被简化了：
<div id="contenteditable" contenteditable="true">
浏览 0提问于2012-05-23得票数 0
回答已采纳
1回答
我有这个标记
<div contentEditable="true">
Some other editable content
<div class="field" contentEditable="false">
<span class="label">This is the label</span>
<span class="value" contentEditable="true">Th
浏览 6提问于2013-01-22得票数 7
回答已采纳
2回答
我使用的是一个可争用的div控件，当用户第一次在该控件内单击时，我希望删除所有文本并将插入符号放在开头。到目前为止，我的代码在IE，Opera和Firefox上都可以工作，但在Chrome上，插入符号似乎没有出现在我试图设置它的地方。我的代码如下：
<div id="mydiv" runat="server" contenteditable="true">
<div id="innerDiv" runat="server">
<span onclick="j
浏览 0提问于2013-01-28得票数 1
1回答
示例：
如何使用range对象来解决这个问题？
提前谢谢。
我的代码：
<div contenteditable="true">
Hello World <span>try to insert text in the beginning of this element</span>
</div>
当用户尝试在span元素的开头插入文本时，结果：
<div contenteditable="true">
Hello World [INSERTED_TEXT]<span>
浏览 1提问于2014-07-07得票数 0
我试图在contenteditable的末尾发送插入符号，这很好，但如果我插入一个空的<span></span>元素和结束，它不会放在末尾。
<div contenteditable>
<span>Start</span>
<span></span>
</div>
卡莱塔是在开始，但不是在新的线路上。
下面是我用来将插入符号放在末尾的代码：
PlaceCaretAtEnd(el) {
el.focus();
if (typeof window.getSel
浏览 1提问于2018-08-26得票数 1
回答已采纳
1回答
关于contenteditable = "true"，我想在这里删除.icon是不可能的。(.Icon总是排在最后。) 我正在尝试下面的代码。 <h2>
<span class="txt" contenteditable="true">World</span>
</h2>
<h2>
<span class="txt" contenteditable="true">Hello<span class="icon"
浏览 17提问于2019-04-07得票数 0
1回答
我在插入MathJax公式时遇到了一些困难。我希望用户可以在每个公式之间插入游标，因此可以在它们之间插入insert公式。
我的代码：
function get(elem)
{
currentFormul = elem;
var math = MathJax.Hub.getAllJax(elem)[0];
var input = document.getElementById("MathInput");
input.value = math.originalText;
}
function input()
{
sel = window.
浏览 3提问于2015-08-14得票数 0
回答已采纳
1回答
如何获取出现插入符号(文本编辑闪烁光标)的元素的xpath或元素引用，插入符号可以通过鼠标单击或使用键盘操作来定位。
<div class="PPTOutlineViewContent" contentEditable="true" draggable="false">
<div class="PPTOutlineSlide_1 Slide">
<div class="PPTOutlineSlideNumber" contentEditable="false"&
浏览 0提问于2014-06-23得票数 0
当在div上使用contenteditable属性并插入html元素span时，由于某种原因，插入符号在span旁边更改位置。
因此，您可以看到插入符号已被向上推高：
控制插入位置的是什么?我要改变它的机制是什么？
html:
<div style="resize:none; overflow: auto; border: none" contenteditable="true">
is your email still <span class="inline-button" contented
浏览 3提问于2020-03-02得票数 1
2回答
因此，我尝试使用SPAN elemenet，它是用display: inline-block设置的，因此它可以包含多行。
当我手动输入文本，文本到达EOL时，它将自动跳转到下一行。
但我不能使用ENTER插入换行符，因为游标跳出整个块。
<div id="window-kitkat" class="form-control" contenteditable="true">
<div class="skeleton-block" contenteditable="false">
浏览 4提问于2015-10-03得票数 1
回答已采纳
我在一个contenteditable元素(Div)中有一个药丸和文本。但是，在删除药片旁边的最后一个字符后，插入符号会跳转到contenteditable元素的右边缘。如何避免插入符号跳跃(偏移)？
HTML：
<div class='container' contenteditable="true">
<div class='pill' contenteditable="false" >Andy Green</div>Text B
</div>
CSS
.container
浏览 10提问于2017-02-28得票数 1
我一直在玩contenteditable领域，遇到了一种奇怪的行为，我搞不懂。
请查看中的这个特定问题。
我有两个相同的contenteditable div。它们都有相同的<span>子级，后面跟着一个空白字符(否则就会出现胡萝卜问题)。两者之间唯一的区别是，第二个div已经被“美化”，并且通过在新行上缩进<span>来提高可读性。
<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contentedi
浏览 5提问于2016-05-10得票数 1
回答已采纳
我有一个将contenteditable设置为true的div，然后在里面动态添加另外两个div。例如
<div contenteditable='true'>
<div id='1'>
<span>Something Editable</span>
<span contenteditable='false'>Something NOT Editable</span>
</div>
<div id=&#
浏览 0提问于2020-08-07得票数 0
1回答
附加奇怪的行为
、、、
我有一些向contentEditable div添加元素的应用程序。如下所示：
<div id="div" contentEditable="true"></div>
<button id='appendBtn'>append</button>
<style>
.bracket {
color: blue;
}
.template-content {
color: green;
}
#div {
borde
浏览 3提问于2017-01-20得票数 2
回答已采纳
请参考以下示例：
<div class="editable" contentEditable="true">Some more text here
<span contentEditable="false">not editable</span>
Hi this is my content
</div>
$(document).on('click', '.editable span', function() {
$(this).closest(
浏览 18提问于2018-08-16得票数 0
回答已采纳
我有我的contentEditable div：
div {
width: 200px;
height: 300px;
border: 1px solid black;
}
<div contenteditable="true" spellcheck="false" style="font-family: Arial;">
<b>Lorem ipsum</b> dolor sit amet, <u>consectetur adipiscing elit.
Morbi
浏览 42提问于2017-09-16得票数 18
回答已采纳
我的代码：
addEmoji = () => {
document.getElementById('description-text').focus();
let element = $("#span").clone()[0];
let sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
let range = sel.getRangeAt(0);
range.deleteContents
浏览 1提问于2018-10-26得票数 2
这种情况只发生在Firefox中。
重要事项:我正在用保存插入符号的位置
单击内容可编辑的div时
关于键控
将外部html元素(作为节点)添加到内容可编辑div时
我需要通过多种方式不断保存的位置，以便能够插入html元素的点击(我有一些标签)。
当我在contentEditable div中单击而div为空(例如，第一个焦点)时，除非我开始键入，否则无法看到插入符号。如果插入符号在末尾，我也看不到它。
另一个奇怪的行为是，我不能使用箭头在contentEditable div中的文本之间导航。
如果我删除(经常)保存插入符号位置的函数(在输入时，单击等)。插入符号返回正
浏览 0提问于2019-08-06得票数 5
回答已采纳
我试图在vue.js中创建一个编辑器，它的结构如下所示。
这是代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ContentEditable problem in vue.js</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
浏览 0提问于2017-01-13得票数 2
我一直在使用jquery()插件来调整内容可编辑div中表的大小。
我希望能够从表行中调整行高的大小，但是标准设置将南方处理程序方式放置在表的底部，实际上远远低于表的实际大小。
我一直在玩CSS，试图让每个行处理程序设置在行的边框上，但是无法精确地设置，只是无法在行增长时停留在边框上。
这是密码，如果有人能帮忙的话。
$(document).ready(function(){
$('tr').resizable({
handles: "s"
});
});
table {
width: 100px;
height: 100px;
}
浏览 5提问于2017-10-10得票数 0
回答已采纳
当我使用显示:内联-flex；或显示:内联网格；时，似乎添加了一些“空格”，或者进行了某种额外的聚焦计算。我不知道到底发生了什么。当使用箭头键在一个内容可见的div中导航时，插入符号会被卡住，就好像它在聚焦于一个不同的元素或其他什么东西一样。有人知道原因吗？如果是这样的话，无论如何防止这种行为(不使用JavaScript来处理事件)？
考虑以下两个可满足的div之间的差异：
(使用箭头键导航时，插入符号在"Hello“和"World”之间“卡住”)
<div contenteditable="true"><span style="d
浏览 2提问于2020-09-08得票数 5
我对我在“小提琴”中复制的可满足的div有一个问题。问题是，当我在可内容的div之间单击并单击backspace时，div中的span标记将被删除。我在小提琴里也试过了，但效果很正常。但是当我把光标放在末尾时，它是一个接一个地删除跨度。
这行得通
<div contenteditable="true">
<span contenteditable="false">value1</span>
<span contenteditable="false">value2</span>
<s
浏览 3提问于2017-12-07得票数 0
回答已采纳
1回答
当检测到事件“按键”时，事件“模糊”也会自动触发。如果触发“keydown”事件，如何防止元素上的“模糊”事件？下面是和代码: HTML：
<div id="delegatee">
<span id="ctrl" contenteditable="true"></span>
</div>
CSS：
#ctrl {
width:100px;
height:50x;
border:1px solid black;
display:inline-block;
}
浏览 2提问于2013-10-25得票数 1
回答已采纳
1回答
为什么将contenteditable="true"添加到div内的span中，会导致断线？
div{
width: 110px;
height: 80px;
border:1px solid #5aa;
}
<div>
<span>IamANowSpaceLineSample</span>
</div>
<br/>
<div>
<span contenteditable="true">IamANowSpaceLineSample</span&
浏览 2提问于2017-10-21得票数 0
回答已采纳
我对我的可满足的部门有个问题。当我单击按钮时，会将一个span get插入到我的div中。当我现在开始输入时，文本会在跨度内，而不是在其外部：
jQuery(document).ready(function($) {
let input = $("#input");
input.on("input", function() {
console.log($(this).html().length);
// Contenteditable adds a <br> when empty.
// Solutio
浏览 6提问于2020-03-12得票数 1
回答已采纳
我想将选定的文本从一个内容div移到另一个内容div。并且所选文本应追加到另一个div的当前插入符号位置。有没有办法获得基于div id的护理位置？我观察到，在所有的资源中，获得的插入符号位置总是基于选择。
<body >
<div contenteditable="false" id='selectfromhere' >
some text select
</div>
<div contenteditable="true" id='movehere' >
s
浏览 1提问于2015-12-09得票数 0
我有一个内容可编辑的div，跨度如下：
<div contenteditable="true">some <span>spanned</span> text</div>
我想知道是否有可以附加到span元素本身的事件侦听器，它们可以用来检测插入符号是否在span元素内部移动。
我不是在寻找有监听器连接到div的答案，每次div中有活动时都会运行检查，例如这个答案的解决方案：
浏览 1提问于2018-06-29得票数 3
我对firefox有一个问题。光标跳到div中，当我点击backspace时，我设置了一个属性contenteditable = false，而不是删除整个div (适用于chrome和safari)结构：
<div contenteditable="true">
<div contenteditable="false">
### CONTENT ###
</div>
</div>
此外，每个嵌套的HTML组件都有一个属性contenteditable="false“
浏览 12提问于2018-09-05得票数 0
12回答
例如，我有以下布局：
<div contenteditable="true">
<span class="text-block" contenteditable="false">
<span contenteditable="false">Name</span>
<a href="javascript:void(0)">
<i class="small-icon-remove">
浏览 10提问于2014-02-18得票数 32
回答已采纳
3回答
在this SO post之后，我可以将插入符号放在span元素中，该元素位于div contenteditable="true"中。 我可以通过它的id指向我想要的任何span，同时还能够决定插入符号应该放在哪个字符后面。 但是我怎么能把插入符号放在一个没有文本的跨度里呢？ 只需按原样使用函数，就会得到这个错误：TypeError: Range.setStart: Argument 1 is not an object. 此外，由于某些原因，当span有内容时，它在火狐中工作得很好。但在Chrome中并非如此，因为在Chrome中，插入符号放在span之外。有什么办法也能解
浏览 63提问于2020-10-15得票数 6
回答已采纳
如果在所有文本之后单击div，div会被聚焦，但没有设置插入符号( span.notContentEditable中设置的插入符号没有显示)(火狐/vivaldi/(ubuntu19.10上的chrome)中存在问题)
div[name="comment"] {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
浏览 0提问于2020-01-20得票数 0
我正在创建自己的聊天应用程序，其中我使用内容可编辑的div作为chatbox。我正在实现提到特性，其中我提到的用户名被一个span标记封装，后面跟着一个空格( )，但是我的问题是当我移除空间时，我的光标移动到div的末尾。
有空间
<html>
<head>
</head>
<body>
<div contenteditable=true><span contenteditable='false'>UserName</span> </div&
浏览 0提问于2018-03-08得票数 11
回答已采纳
2回答
可以选择多个不同的html元素并用div包装它们吗？
例如：
<span contenteditable="false">The correct answer is (A) 1 to 2. </span> <span contenteditable="true" class="answers-edit"></span>
<br>
<br>
<span contenteditable="false">Choice B (2 to 3) </sp
浏览 3提问于2015-09-17得票数 0
回答已采纳
代码概述：这段代码由一个可编辑的div部分组成。在div下面有一个按钮，它创建span元素，在span元素中插入文本“标记”，最后在可编辑的div中追加span元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></scr
浏览 4提问于2017-09-03得票数 3
回答已采纳
我有这样一个HTML结构：
<div contenteditable="true">This is some plain, boring content.</div>
我还有一个函数，它允许我在div中将插入符号位置设置为我想要的任何位置：
// Move caret to a specific point in a DOM element
function SetCaretPosition(object, pos)
{
// Get key data
var el = object.get(0); // Strip inner obje
浏览 2提问于2016-04-26得票数 11
回答已采纳
我有一个ContentEditable设置为TRUE的DIV。在它里面有几个跨度，ContentEditable设置为FALSE。
我捕获了BackSpace键，这样如果光标下的元素是<span>，我就可以删除它。
问题是，它只与奇数跨度交替工作。
例如，在下面的html代码中，将光标放在DIV中文本的末尾，然后一直按backspace，直到div开始。注意到它将选择/删除第一个span，然后离开第二个，然后选择/删除第三个span，然后留下第四个，依此类推。
此行为仅在上进行。在Firefox上，它的工作原理与预期完全一样。
如何使Internet中的行为保持一致？
下面的htm
浏览 3提问于2015-07-13得票数 6
回答已采纳
1回答
如果contenteditable在文本末尾有span元素，并且在使用箭头时，请将其跳转到另一个可内容项。
例如，当我的光标出现在和游标跳转到第三个可内容部分时，我正在移动第二个内容可编辑部分的箭头键。但是光标必须停留在第二部分。
<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr" >
before
</div>
<div class="
浏览 5提问于2017-11-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
