javascript - Contenteditable div 文本被添加到 span 元素中而不是外部

Question

我的 contenteditable div 有问题。当我单击按钮时，一个跨度就会插入到我的 div 中。当我现在开始输入时，文本会进入范围内，而不是超出范围:

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">😅</span>`);
    input.trigger('input');
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

这真是一件奇怪的事情。另外，当我添加表情符号时，删除内容并输入一些内容，a <font>元素 get 是用表情符号的风格创建的。有谁知道我该如何解决这个问题？

Answer 1

只需在您的 span 上添加 contenteditable="false" 即可。

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji" contenteditable="false">😅</span>`);
    input.trigger('input');
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>