自定义 textarea/contenteditable，其中包含 div答案

【问题标题】：Custom textarea/contenteditable with divs inside it自定义 textarea/contenteditable，其中包含 div
【发布时间】：2017-05-23 07:37:42
【问题描述】：

我目前在一个网站上工作，用户应该能够在该网站上编写带有所属和弦的新歌曲并将其插入数据库。总结一下，很快就明白了，这是我的问题：

我有一个 id 为“#textarea”的 div，属性 contenteditable=“true”。在每个输入/换行符上，我想创建一个新的 div，其类为“.chords”，属性 contenteditable=“false”。这个“.chords” div 应该放在新行之前，如下图所示：

红色是#textarea div，蓝色是.chords div

所以我的问题是：我该怎么做？我已经在这篇文章的末尾发布了我尝试过的代码，但是正如你所看到的，如果你运行它，.chords div 位于新行的下方，所以我现在有点卡住了。如果有任何一个你们有一个想法如何做到这一点，请让我听听你的意见！

$(function(e) {
  $('#textarea').keydown(function(e) {
    var i = 0;

    // Check if the returnkey is being pressed
    if (e.keyCode === 13) {
      $("#textarea div:last-of-type").after("<div class=\"chords\" id=\"" + (i + 1) + "\" contenteditable=\"false\"></div>");
      i = i + 1;
    }
  });
})

#textarea {
  border: 1px solid black;
  line-height: 50px;
  font-size: 20px;
}

.chords {
  height: 30px;
  border: 1px solid black;
  position: relative;
}

#textarea div:not(.chords) {
  margin-top: 20px;
  min-height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable="true">
  <div class="chords" id="1" contenteditable="false"></div>
  <div></div>
  <!--End of #textarea-->
</div>

【问题讨论】：

我认为您不能这样做，因为同一 div 上的文本但另一个动态 div 上的文本不同。我认为你需要找到另一种方式。
嗯，你可能是对的。我在教育“网络集成商”学习，所以我还不是专家..
我可以用不同的方式帮助你
那太好了。您对此有什么建议，或者可以做类似的事情吗？
是的，请稍等

标签： javascript jquery html textarea customization

【解决方案1】：

类似的东西

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #textarea {
          border: 1px solid red;
          line-height: 50px;
          font-size: 20px;
          min-height: 40px;
        }

        .chords {
          height: 30px;
          border: 1px solid black;
          position: relative;
          margin-top:5px;
        }

        #textarea div:not(.chords) {
          margin-top: 20px;
          min-height: 40px;
        }
    </style>
</head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(e) {
              $('#textarea').keydown(function(e) {
                var i = 0;

                // Check if the returnkey is being pressed
                if (e.keyCode === 13) {
                  $(this).after('<div class="chords" id="'+ (i + 1) +'" contenteditable="false"></div><div>'+$(this).html()+'</div>');
                  $(this).html("");
                  i = i + 1;
                }
              });
            })
        </script>
        <div id="textarea" contenteditable="true">
        </div>
          <div class="chords" id="1" contenteditable="false"></div>
          <div></div>
          <!--End of #textarea-->
    </body>
</html>

检查一下 https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp

【讨论】：

啊，我知道你在那里做了什么。背后的想法很好，但我的客户认为重要的是它就像一个大文本区域，您可以在其中编写、删除和编辑文本，而不仅仅是通过一个文本字段。不过谢谢你的建议！