Question

我目前正在开发一个网站，用户应该可以在这个网站上编写和插入带有和弦的新歌曲。为了总结一下，并且很快就达到了目的，这是我的问题：

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

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

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

＆＃13;

$(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;
    }
  });
})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 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

自定义textarea / conidteditable里面的divs

1 个答案: