Javascriptでテキストボックスを変更したい

質問

Javascriptを使って、テキストボックスの選択した文字だけ、
大きくしたり色を変えたりしたいのですが、
どのように記述したらいいのでしょうか？
（テキストボックスにhtmlタグ表示ではなく、ビジュアル的にも変更した情報を表示させたい）

最終的にその情報を保存したいと思っております。

回答No.1

yambejp · ベストアンサー

テキストボックスは仕様上無理ですが、divをつかって似たようなことはできます

<style>
div#data{
width:200px;
height:200px;
border:1px solid #000000;
}
</style>
<button onclick='document.execCommand("bold");'><b>B</b></button>
<button onclick='document.execCommand("italic");'><i>I</i></button>
<button onclick='document.execCommand("underline");'><u>U</u></button>
<button onclick='document.execCommand("forecolor",false,"#ff0000");'><span style="color:red">red</span></button>
<button onclick='document.execCommand("forecolor",false,"#00ff00");'><span style="color:green">green</span></button>
<button onclick='document.execCommand("forecolor",false,"#0000ff");'><span style="color:blue">blue</span></button>
<button onclick='document.execCommand("forecolor",false,"#000000");'><span style="color:black">black</span></button>
<button onclick='document.execCommand("fontsize",false,1);'><span style="font-size:small">small</span></button>
<button onclick='document.execCommand("fontsize",false,3);'><span style="font-size:medium">medium</span></button>
<button onclick='document.execCommand("fontsize",false,5);'><span style="font-size:large">large</span></button>
<button onclick="alert(data.innerHTML)">ソース</button>
<div id="data" contenteditable>
test<br>
test<br>
test<br>
test<br>
</div>