代码之家 › 专栏 › 技术社区 › Shabin Muhammed

内容可编辑Div,附加HTML导致问题。通过编程附加HTML后键入的每个文本都会添加到最后一个HTML标记中

contenteditable html javascript

Shabin Muhammed · 技术社区 · 7 年前

我正在尝试制作一个内容可编辑的div,可以用来为应用程序生成消息模板。用户可以通过点击按钮将名称等字段的占位符附加到模板中。也可以通过点击占位符上的“x”来删除占位符。以下是工作片段。

var removePlaceholder = function(e){
  e.parentNode.parentNode.removeChild(e.parentNode);
}

var appendPlaceHolder = function(field){
  var e = document.getElementById("t");
  e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>')
}

.tag {
  background-color : blue;
  color : white;
}
.remove {
  color : red
}

<div id="t" contenteditable="true">Hello</div>

<button onclick=appendPlaceHolder("first_name")>Add first name</button>

contenteditable部分工作正常。但是,在使用appendPlaceHolder函数添加占位符后,我键入的所有内容似乎都被追加到最后插入的HTML元素中。

要重新创建问题,请运行代码段并点击“添加名字”按钮,然后继续在该区域键入。

使现代化

添加了图像来解释情况

1 回复 | 直到 7 年前

Script47 7 年前

您可以在添加占位符后添加一个空格:

JavaScript

var removePlaceholder = function(e){
  e.parentNode.parentNode.removeChild(e.parentNode);
}

var appendPlaceHolder = function(field){
  var e = document.getElementById("t");
  e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>&nbsp;')
}

注:  

实例

JSFiddle