div内のdivでカスタムテキストエリア/ contenteditable

私は現在ウェブサイト上で作業しています。そこでは、ユーザは、所属するコードを含む新しい曲をデータベースに書き込んで挿入する必要があります。物事をまとめて、かなり早く、ここに私の問題があります：div内のdivでカスタムテキストエリア/ contenteditable

idが "#textarea"、属性がcontenteditable = "true"のdivがあります。それぞれの入力/改行で、クラス ".chords"と属性contenteditable = "false"で新しいdivを作成したいと思います。画像は、ここで示したように、この「.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>

出典

2017-05-23 user3276657

を、それをチェックアウト異なる。私はあなたが別の方法を見つける必要があると思う。 – Maruf

ええ、あなたは正しいかもしれません。私は教育 "webintegrator"で勉強しているので、まだ専門家ではありません。 – user3276657

私は別の方法をお手伝いします – Maruf

同じdivの上のテキストが、別の動的なdiv要素であるため、その

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

出典

2017-05-23 08:54:53 Maruf

ああ、あなたがそこで何をしたのか分かります。その背後にある考え方は良いですが、私のクライアントは、1つのテキストフィールドだけではなく、テキストの作成、削除、編集ができる大きなテキストエリアのように重要だと考えています。しかし、あなたの提案に感謝します！ – user3276657

div内のdivでカスタムテキストエリア/ contenteditable

答えて

関連する問題