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>我可能最终会把它改回来 - 我希望每次按下回车键时将 contenteditable 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>');
  }
});