Question

概述：我有一个可编辑的div部分。在div下面，有一个创建span元素的按钮，在span元素中插入文本“tag”，最后在可编辑的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"></script> 
    <style type="text/css">
        #sample-div
        {
            border-style: solid;
            border-width: 1px;
            border-color: black;
            height:100px;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        function addTags()
        {
            var tag = document.createElement("span");
            tag.className = "tag"
            tag.innerHTML = "tag";
            $('#sample-div').append(tag);
        }
    </script>
</head>
<body>
 <div id="sample-div" contenteditable="true"></div>
 <input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>

观察：我点击按钮，span元素按预期添加到div

<div id="sample-div" contenteditable="true">
   <span class="tag">tag</span>
</div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">

然而，在我开始在div中输入后，我注意到以下内容：

<div id="sample-div" contenteditable="true">
   <span class="tag">tag this is a continuation</span>
</div>

我的期望是：

<div id="sample-div" contenteditable="true">
   <span class="tag">tag</span> this is a continuation
</div>

所以，我的问题是为什么文本“这是一个延续”也被附加在span元素中？我如何实现我期望的那个？

Answer 1

最简单的解决方案是将您的范围的contentEditable属性设置为false：

function addTags() {
    var tag = document.createElement("span");
    tag.className = "tag"
    tag.innerHTML = "tag";
    tag.contentEditable = false;
    $('#sample-div').append(tag);
}

旁注：由于您使用的是jQuery，因此无需手动创建标记：

function addTags() {
   var tag = '<span class="tag" contenteditable="false">tag</span>'
   $('#sample-div').append(tag);
}

为什么文本被附加到错误的html元素？

1 个答案: