WordPressを触っていたら、プラグインでLive Comment Previewというのがあったのでいいなーと思ったんですが、つまり、コメントを書いている最中に、自分が書いているコメントがすぐに表示される、という仕組みなんですね。ライブコメントプレビュー。でも良く見たら、これってJavascriptで意外にあっさり実現できるかも、と思ってああでもない、こうでもないとちょこちょこ触っていたんですが、Googleしていろんなところから切り貼りして、結局私のオリジナルではないんですが作ってみましたのでコード書いておこうと思います。ご自由にご利用ください。
まず、Individual Entry Archiveのテンプレートを開き、最初の<head></head>の間のどこでもいいので、以下のタグを書き入れます。
<!–
var newline = /\n/g;
function ReloadTextDiv() {
var NewText = document.getElementById(“text”).value;
NewText = NewText.replace(newline, “<br />”);
var DivElement = document.getElementById(“TextDisplay”);
DivElement.innerHTML = NewText;
}
//–>
</script>
ここで気をつけなければいけないのは、１行目のvar newlineで指定してあるのは、スラッシュ、バックスラッシュ、エヌ、スラッシュ、ジー、セミコロン、です。バックスラッシュって時々、円マーク（￥）に変化してしまったりするので、そのときは手入力してみてください。
次に、コメントフォームの中に、<textarea…で始まるタグを見つけ出し、そこに
を追加します。ちなみに私のサイトだと、
というタグにしてます。そして最後に、プレビューを表示したいところに
のように”TextDisplay”のIDを足してあげればできあがりです。あ、上の、<span id=”TextDisplay”>と</span>の間の微妙なスペースの部分には、& n b s p ; (をスペースなしで書く）を書いています。もしかしたら私が未熟すぎて、これが動かないブラウザもあるかもしれません。サンプルとしては、この記事のコメントの部分に行き、いろいろ試してみてください（でも実際に「投稿」は押さないでくださいね）。<b></b>タグや、<font color=”red”></font>だとか<a href=”#”></a>などのタグが目の前でどんどんプレビューされるのは結構楽しいですね。画像も出ますよ。コメントの中で、<img src=””>のタグに、試しにhttp://eiyou.net/images/typekey.pngを入れてみると分かります。日本語は、リターンを押して漢字を決定するまでプレビューされないブラウザもあります（私が使っているサファリも）。