Personnalisé textarea/contenteditable avec divs dedans

Je travaille actuellement sur un site web, où un utilisateur devrait être capable d'écrire et d'insérer de nouvelles chansons avec des accords d'appartenance dans une base de données. En résumé, voici mon problème:Personnalisé textarea/contenteditable avec divs dedans

J'ai une div avec l'identifiant "#textarea" et l'attribut contenteditable = "true". A chaque entrée/saut de ligne, je voudrais créer une nouvelle div avec la classe ".chords" et l'attribut contenteditable = "false". Ce « .chords » div doit être placé juste avant la nouvelle ligne, comme l'image montre ici:

La couleur rouge est le #textarea div, et la couleur bleue des .chords divs

Donc, ma question est: comment puis-je faire cela? J'ai posté le code que j'ai essayé à la fin de ce post, mais comme vous voyez si vous l'exécutez, les divs .chords sont positionnés en dessous de la nouvelle ligne, donc je suis maintenant un peu coincé .. Si tout de vous les gars avez une idée sur la façon de le faire, s'il vous plaît laissez-moi avoir de vos nouvelles!

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

Source

2017-05-23 user3276657

Je pense que vous ne pouvez pas le faire parce que le texte sur le même div mais un autre div dynamique sont différent. Je pense que vous devez trouver un autre moyen. – Maruf

Hmm, vous pourriez avoir raison. J'étudie à l'éducation "webintegrator", donc je ne suis pas encore un expert .. – user3276657

Je peux vous aider de manière différente – Maruf

quelque chose de similaire comme ça

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

Source

2017-05-23 08:54:53 Maruf

Ah, je vois ce que vous avez fait là. L'idée derrière est bonne, mais mon client pense qu'il est important que ce soit comme une grande zone de texte, où vous pouvez écrire, supprimer et éditer le texte, et pas seulement à travers un champ de texte. Mais merci pour votre suggestion! – user3276657

Personnalisé textarea/contenteditable avec divs dedans

Répondre

Questions connexes