textareaで一部の文字だけ装飾する(contenteditableで代用)

この記事について

環境	HTML5、css
目的	textarea内の一部の文字だけ装飾したい
結果	contenteditable=trueを付けたdivで代用して解決

textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくないので、理解するのに時間がかかって面倒くさい。

で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。

サンプル

この文字は直接編集できます。textarea は使っていません。

html

<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>

css

#box {
	border: 1px solid #999;
	width:300px;
	height:100px;
}

.font1 {
	color: red;
}

.font2 {
	color: blue;
}

.font3 {
	font-weight: bold;
}

大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。