javascript - 如何从 contenteditable div 中提取文本(但不是 html 标签)

Question

<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>

忽略随机 type="text"和占位符，因为它曾经是 <input>我可能最终会把它改回来——我希望每次按下回车键时，将可内容编辑的 div 中的文本“转换”(因为没有更好的词)到 div 中的 html 元素。

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

我完全相信有更好的方法来做到这一点 - 当然愿意接受建议。但是我仍然对标题中指定的问题感到好奇。

其他想法

我还考虑过将额外的元素作为兄弟元素附加到 <input> 中元素并使用 css 设置样式，使额外的元素叠加在输入字段上，然后动态调整 padding-left输入框的属性。

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

Answer 1

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

<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>');
  }
});