divの周りのテキストエリアの入力を囲みます

私は右上隅にdivボックスを持つtextareaフィールドを持っています。私ははるかに幅広く検索しましたが、テキストエリアに入力されたテキストをそのdivを囲む方法を見つけることができません。divの周りのテキストエリアの入力を囲みます

アイデア？

   
 
      #wrapper { 
 
       position: relative; 
 
       width: 500px; 
 
       height: 500px; 
 
       } 
 
    
 
      #logo { 
 
        
 
       width: 100px; 
 
       height: 100px; 
 
       position: absolute; 
 
       right: 10px; 
 
       background-color: cyan; 
 
      } 
 
    
 
      textarea { 
 
       width: 100%; 
 
       height: 100%; 
 
      }

<html> 
 
    <head> 
 
     <title></title> 
 
     <meta charset="utf-8"/> 
 
    </head> 
 
    <body> 
 
     <div id="wrapper"> 
 
      <div id="logo">LOGO</div> 
 
      <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam acumsan fringila lacus, in rhoncus ligula pretium eu. Nulam blandit vel quam ut posuere. Sed tincidunt comodo lacinia. Vivamus eget ulamcorper sapien. Phaselus gravida pretium sem, non fringila orci luctus vel. Donec augue sapien, pharetra portitor fringila hendrerit, ultrices in telus. In aliquet laoret turpis vitae ultrices. Praesent eget nula et telus pelentesque suscipit ac eu est. Nula sed imperdiet dui. Donec eficitur est dolor, nec placerat ex posuere pretium.</textarea> 
 
     </div> 
 
    </body> 
 
    </html>

出典

2017-03-22 JKJ

divをテキスト領域の中央に配置しますか？ – Monicka

divを右に浮かべたように動作させますか？私はあなたがこれを行うことができるとは思わない...絶対的な位置は、通常の流れからdivを取る - テキストはそれを包むことができません – sol

はい、右浮かんだように。理想的には、どこに配置されていてもdivを囲む方法を知ることは理想的ですが、この特定のアプリケーションでは、右上隅に配置するための解決策があれば問題ありません。 – JKJ

私はこれはかなり古代の議論が見つかりました： Unusual shape of a textarea?

与えられた答えはdivにcontenteditableプロパティを使用することです。

私はあなたが探しているように見えるこのコードを取得することができます。

<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <style> 
     #wrapper { 
     width: 500px; 
     height: 500px; 
    } 

    #logo { 
     width: 100px; 
     height: 100px; 
     float:right; 
     background-color: cyan; 
    } 

    .textarea { 
     width: 100%; 
     height: 100%; 
    } 

    </style> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="logo">LOGO</div> 
     <div class='textarea' contenteditable='true'>HTML</div> 
    </div> 
</body> 
</html>

私はちょうどfloat:right;で<div class='textarea' contenteditable='true'>とposition: absolute;で<textarea>を交換してください。

出典

2017-03-22 16:38:16 Sylvain

これは本当に良い回避策であり、本質的にそれは動作しますが、クロムは、divがテーブル形式のdivに組み込まれているときにこのコードを処理する問題があるようですしかし、Edgeでは罰金％）。基本的にcontenteditable = "true"のdivは、テキストが含まれているかどうかに応じてジャンプします。こちらをご覧ください：http://codepen.io/anon/pen/yMjaPEどのようにそれを修正するためにどのような考えですか？ – JKJ

あなたの問題は、あなたのディスプレイの使用から来ています：テーブルとディスプレイ：table-cell。ご覧のとおり、http://codepen.io/Syl-gauthier/pen/XMqeqm（contenteditableはオフになっています）。 – Sylvain

私はあなたにそのようなものを提案することができますhttp://codepen.io/Syl-gauthier/pen/evrGKN。 PS：私は決して 'display：table;'を使ったことがないので、問題の原因はどこか分かりません。私の推測では、表のセルと通常のdivで異なるテキストの垂直方向の配置とは何かがあることです。 – Sylvain

divの周りのテキストエリアの入力を囲みます

答えて

関連する問題