Javascript 如何从contenteditable div（但不是html标记）提取文本 $（文档）.on（'keyup'，'#inputEmailTo'，函数（e）{ 如果（e.keyCode==13）{ e、 预防默认值（）； console.log（$（this.text（））； var recipient=$（this）.text（）；//如何仅提取文本而不提取任何附加的文本 $（this.text（“”）；//如何删除它们 $（this.append（“”+收件人+“”）； } });

忽略random type=“text”和占位符，因为它过去是一个

，我可能最终会将其更改回原来的位置-我希望在每次按下enter键时将contenteditable div中的文本“转换”（因为没有更好的词）为div中的html元素

我真正想要实现的是类似于GMail收件人列表的功能

我完全相信有一个更好的方法可以做到这一点——当然可以接受建议。然而，我仍然对标题中指定的问题感到好奇

其他想法

我还考虑将额外元素作为

元素的同级元素追加，并使用css对其进行样式设置，以便将额外元素叠加在输入字段上，然后动态调整输入框的

padding left

属性

---

抱歉，这篇文章有点混乱，基本上有两个问题聚集在一起-我应该如何在stackoverflow上问这些问题？它们应该是两个独立的问题吗？

我不确定这算不算答案（因为你还是建议了它），但我建议你将“最终确定”的电子邮件地址放在可编辑div之外的自己的框中，并根据需要调整可编辑地址的填充/边距/位置（GMail也是这样做的）。这样，您就不必担心忽略已经添加的元素，而只提取新文本；他们已经分开了

<div class="col-sm-9">
  <div contenteditable type="text" id="inputEmailTo" class="form-control" placeholder="Recipients"></div>
</div>

<script>
  $(document).on('keyup', '#inputEmailTo', function (e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      console.log($(this).text());
      var recipient = $(this).text(); // How can I extract just the text and not any appended <span>s
      $(this).text(''); // And how can I remove them
      $(this).append('<span class="recipient">'+recipient+'</span>');
    }
  });
</script>

$（document）.on（'keyup'，'inputEmailTo'，函数（e）{
如果（e.keyCode==13）{
e、 预防默认值（）；
console.log（$（this.text（））；
var recipient=$（this.text（）；
$（此）.text（“”）；
$（'#FinalizedAddresss'）。追加（''+收件人+''）；
}
});

（GMail也是这么做的）

谢谢，这让人放心。我想我只是希望避免所有那些（混乱的）css。酷的东西可能是困难和混乱的您可以尝试将所有元素设置为float:left，然后将可编辑的div设置为width:1px；溢出：可见，这可能会更容易。另一方面，用户可能很难在1px宽的div中单击：如果我这样做，我可能会返回到一个输入，而不是一个contenteditable div。我尝试该div的唯一原因是它可能有子元素。你能解释一下宽度为1px；溢出：可见但是？基本上我在想（没有测试）的是，当填充行时，“最终地址”足够宽，占据了大部分行时，div将自动向下推到第二行。现在我想得更多了，我想你真正想要的是让它们都是内联的，所以在

之前插入

的原始计划可能是最好/最简单的选择（默认情况下，所有项目都是

显示：内联的
）。GMail实际上将它的“最终地址”
s设置为
display:inline block
，这样它们就不会断行了。
<div class="col-sm-9">
  <div id="finalizedAddresses"></div>
  <div contenteditable type="text" id="inputEmailTo" class="form-control" placeholder="Recipients"></div>
</div>

$(document).on('keyup', '#inputEmailTo', function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    console.log($(this).text());
    var recipient = $(this).text();
    $(this).text('');
    $('#finalizedAddresses').append('<span class="recipient">'+recipient+'</span>');
  }
});