divを入力テキスト形式にするにはどうすればよいですか？

Question

テキストエリアの入力としてtextareaとinput-textを使用すると、いくつかの欠点があります。 textareaは右下隅に少し厄介な三角形を持ち、input-textは単一行の入力です。

私はFacebookの更新入力フォームのようなテキストの入力をしようとします。改行後に入力のサイズが自動的に変更されます。使用された要素またはタグは<div>でした。私がFacebookを再設計した後、どのタグが今使用されているのか把握できないため、私は「使った」と言った。 div要素内のテキストを編集できるCSSプロパティがあります。私は実際にCSSのプロパティをコピーしましたが、今は失いました。誰かが私にどのCSSプロパティを教えてもらえますか？私はそれは私はあなたがgetElementByID('mydiv').contentEditable='true';を行うことによって、JavaScriptでこれを行うことができます知っている

Answer 1

で行われることになるのか分かりませんあなたが使用することができます。

<div id="divThatYouCanWriteStuffIn" contenteditable> 
<!-- you can write in here --> 
</div> 

をご夫婦場合はCSSを使用してこの：

#divThatYouCanWriteStuffIn { 
    min-height: 4em; /* it should resize as required from this minimum height */ 
} 

がで「迷惑な小さな三角形」を取り除くためにs：

textarea { 
    resize: none; 
} 

JS Fiddle demo of both ideas。

Answer 2

かかわら-webkit接頭辞で始まった弱いメモリを持っていますが、私はあなたがhtml5を使用している場合、これはCSS

Answer 3

Facebookの更新入力フィールドは、TEXTAREA要素です。

textarea { resize:none; } 

三角形が消えるようになります。トリックはresizeプロパティを使用することです。

だからあなたがそれらの特定のクラスやIDを持つすべてのテキストエリアやものをターゲットにすることができ

Answer 4

あなたはP、H1、H2などのようなタグをどうのようにテキストエリアに自分のスタイルを追加することができるはずです。..

例：

textarea { 
    font-size:11px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight:normal; 
    line-height:140%; 
    color:black; 
    margin:0 0 5px 5px; 
    padding:5px; 
    background-color:#999999; 
    border:1px solid black; 
} 

この例では、ページ上のすべてのテキストエリアを対象とします。 クラスまたはIDをターゲットにする場合は、テキストエリアを.nameOfClassに変更するか、#nameOfIdに変更します。

これが役に立ちます。