web-dev-qa-db-ja.com

<textarea>のテキストをフォーマットしますか？

テキストエリアは、いくつかの組み込み機能（スクロールバー）があるため素晴らしいです。どうすれば<spans>内のテキスト<textarea>？

csshtml5textareahtml
32
Don P

テキストエリアをカスタマイズする必要がある場合は、contenteditable属性を持つ別の要素（DIVなど）を使用してその動作を再現します。

よりカスタマイズ可能で、より現代的なアプローチであるtextareaは、リッチコンテンツ用ではなく、プレーンテキストコンテンツ用です。

<div id='fake_textarea' contenteditable></div>

スクロールバーは、CSS overflowプロパティで再現できます。

通常、この偽のテキストエリアをフォームで使用できます。つまり、POSTメソッドを使用してコンテンツを送信する必要がある場合は、（jQueryを使用して）

<input type='hidden' id='fake_textarea_content' name='foobar' />

...

$('#your_form').submit(function()
{
  $('#fake_textarea_content').val($('#fake_textarea').html());
});
63
Alcides Queiroz Aguiar

テキスト領域のコンテンツを個別にスタイル設定することはできません。<div>s、または同様のもの。

このようなものが必要ですか：？

http://jsfiddle.net/mekwall/XNkDx/

$('.editable').each(function(){
    this.contentEditable = true;
});

これにより、divのコンテンツを編集できますが、テキストエリアのように見えますが、

太字が機能するようになりました。

8
Deep

TEXTAREA内でHTMLを使用することはできません。

overflow: autoおよび固定widthおよび/またはheightを追加することにより、スクロールを任意の要素に適用できます。

4
Marat Tanalin

CKEditorなどのWeb用のHTMLエディターを使用して、テキスト領域のデータをフォーマットできます。これを確認してください http://ckeditor.com/

1
kaustubh

「偽の」テキスト領域を送信する別の方法は、フォームタグ内に次の行を含めることです

<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
0
Christian