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 内に書かれた文字のように編集できる。
