Custom textarea/contenteditable mit divs drin

Ich arbeite gerade an einer Website, wo ein Benutzer in der Lage sein soll, neue Songs mit zugehörigen Akkorden in eine Datenbank zu schreiben und einzufügen. Um die Dinge zusammenzufassen und auf den Punkt ziemlich schnell zu kommen, hier ist mein Problem:Custom textarea/contenteditable mit divs drin

Ich habe ein div mit der ID "#textarea", und das Attribut contenteditable = "true". Bei jedem Enter/Linebreak möchte ich ein neues div mit der Klasse ".chords" und dem Attribut contenteditable = "false" erstellen. Diese „.chords“ div sollte direkt vor der neuen Zeile platziert wird, wie das Bild hier zeigt:

Die rote Farbe ist die #textarea div und die blaue Farbe der .chords divs

Meine Frage ist also: Wie mache ich das? Ich habe den Code, den ich am Ende dieses Posts versucht habe, gepostet, aber wie Sie sehen, wenn Sie es ausführen, sind die .chords divs unter der neuen Zeile positioniert, so dass ich jetzt ein bisschen fest bin .. Wenn überhaupt Ihr habt eine Idee, wie das geht, lasst mich bitte von Euch hören!

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

Quelle

2017-05-23 user3276657

Ich denke, man kann das nicht tun, weil der Text auf dem gleichen div aber eine andere dynamische div sind anders. Ich denke du musst einen anderen Weg finden. – Maruf

Hmm, Sie könnten Recht haben. Ich studiere bei der Ausbildung "Webintegrator", also bin ich noch kein Experte .. – user3276657

Ich kann dir anders helfen – Maruf

Ähnliche etwas wie das

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

Check it out https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp

Quelle

2017-05-23 08:54:53 Maruf

Ah, ich sehe, was Sie dort getan haben. Die Idee dahinter ist gut, aber mein Klient denkt, dass es wichtig ist, dass es wie ein großer Textbereich ist, wo man den Text schreiben und löschen kann und nicht nur durch ein Textfeld. Aber danke für deinen Vorschlag! – user3276657

Custom textarea/contenteditable mit divs drin

Antwort

Verwandte Themen