2012-10-11 16 views
29

いくつかの組み込みの機能(スクロールバー)のために、テキストエリアが優れています。 <textarea>の中にテキストの<spans>をフォーマットするにはどうすればよいですか?<textarea>の書式設定テキスト?

答えて

55

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

これはもっとカスタマイズ可能で、より現代的なアプローチでは、テキストエリアはプレーンテキストコンテンツ用であり、リッチコンテンツ用ではありません。

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

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

あなたはすなわち、通常の形で、この偽のテキストエリアを使用することができます:あなたはPOSTメソッドを通じてコン​​テンツを提出する必要がある場合、あなたは(jQueryを使って)のような何か行うことができます:

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

を...

$('#your_form').submit(function() 
{ 
    $('#fake_textarea_content').val($('#fake_textarea').html()); 
}); 
+4

のcontentEditable内部の次の行を含めている「偽」テキストエリアを提出する別の方法は、すべてのpoinesと虹ではありません。この記事は、いくつかの私のプロジェクトでcontenteditableを使う前に見たことがある素晴らしい読書です:https://medium.com/content-uneditable/contenteditable-the-good-the-bad-and-the-醜い - 261a38555e9c#.v0d5rghdl。それはとても良いようですが、ひどく欠陥があります。 – swelet

4

​​3210の内部でHTMLを使用することはできません。

スクロールは、overflow: autoを追加し、widthおよび/またはheightを固定して適用できます。

1

CKEditorのようなウェブ用のHTMLエディタを使用して、テキスト領域のデータをフォーマットすることができます。これをチェックしてくださいhttp://ckeditor.com/

8

あなたはテキストエリアの内容を別々にスタイル設定することはできません。あなたはsなどを使用する必要があります。

あなたはこのような何かをしますか:

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

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

これは、あなたがdiv要素の内容を編集することができ、そしてそれはまだテキストエリアのようになります、

太字は現在動作します。

+3

[http://jsfiddle.net/XNkDx/2199/](http://jsfiddle.net/XNkDx/2199/)私はちょうどこのラインが実際にどのように機能するかを示すためにいくつかのラインを追加しました。そして、あなたのために+1、私の友人、素敵な小さなスクリプト – Aleksandar

+0

...私は質問がそれ自身の複製であると言った。誰も気づかなかった? – Deep

0

formタグ

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

あなたはあなたの答えから何かを残したと思います。 – Brigham

+0

uppsss ..それを修正しました。乾杯! – Christian

関連する問題