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>

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

Answer 1

只需添加contenteditable="false"您的span.jQuery(document).ready(function($) {&nbsp; let input = $("#input");&nbsp; input.on("input", function() {&nbsp; &nbsp; console.log($(this).html().length);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Contenteditable adds a <br> when empty.&nbsp; &nbsp; // Solutions on SO appear not to work&nbsp; &nbsp; if (!$(this).text()) {&nbsp; &nbsp; &nbsp; input.html('');&nbsp; &nbsp; }&nbsp; });&nbsp; $("button").click(function() {&nbsp; &nbsp; input.html(input.html() + `<span class="emoji" contenteditable="false">😅</span>`);&nbsp; &nbsp; input.trigger('input');&nbsp; });});[contenteditable=true] {&nbsp; border: 1px solid #aaaaaa;&nbsp; padding: 8px;&nbsp; border-radius: 12px;&nbsp; margin-bottom: 20px;}[contenteditable=true]:empty:before {&nbsp; content: attr(placeholder);&nbsp; display: block;&nbsp; color: #aaaaaa;}.emoji {&nbsp; 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>

Answer 2

您应该使用 img 标签来插入表情符号，我强烈建议您查看telegram web或其他基于网络的聊天应用程序，看看您应该如何处理表情符号。