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($) {

  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>

Answer 2

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