コメントプレビュー機能追加

前々から「あると便利」と思っていたものの 1 つ．
これも既にいろんな人によって作成されているんだけども，なーんかこう，(例えばソースコード上の) 些細な点が気に食わないってだけで，自分で書き直してしまうんだよなぁ．たぶん，その他人のソースを見なければ，そんな気を起こすことなくそのまま流用して幸せになれるんだろうけど，今回の場合はいかんせん "スクリプト言語" だもんなぁ．


/*
    previewComment.js
        コメントプレビュー スクリプト
        (C) 2005 Yoshinori IIHOSHI.
        Created :       2005/03/05 (Sat)
        Last Modified : 2005/03/05 (Sat)
 */


function previewComment()
{
    var strInit = "ここにコメントのプレビューが表示されます。"
    var eDescription = document.getElementById("description");
    var ePreview     = document.getElementById("preview");
    if (!eDescription || !ePreview) {
        return false;
    }

    var strComment = eDescription.value;
    strComment = strComment.replace(/&/g,  "&amp;");
    strComment = strComment.replace(/</g,  "&lt;");
    strComment = strComment.replace(/>/g,  "&gt;");
    strComment = strComment.replace(/\"/g, "&quot;");
    strComment = strComment.replace(/\n/g, "<br />");
    ePreview.innerHTML = (strComment != "") ? strComment : strInit;

    return true;
}

実際に使うには，プレビュー機能を付加したい HTML ドキュメント (当然投稿フォームが存在するはず) を次のように編集する必要がある．

この JavaScript ファイルを指定する script 要素を追加する
(body 要素などの) onload 属性にこの関数を指定する
プレビューの対象に対応する要素 (ほとんどの場合 textarea 要素だろう) の id 属性の値を "description" とする
また，この要素の onblur 属性にこの関数を指定する
プレビューを表示するための要素 (div 要素でも何でも) を追加し，その id 属性の値を "preview" とする
また，この要素のスタイル (style 属性とか外部 CSS + class 属性とか) を投稿後に適用されるスタイルに合わせる

こーすると，コメントなどを投稿する前に該当フォームからフォーカスを外せば，プレビューが表示されるというわけ．もちろん，「入力してはフォーカスを外し…」を繰り返せば何度も確認できる．

あー疲れた．ここまで詳細に書かなくても良かったよーな．「この Weblog のソース見ろ」+「実際にコメント投稿欄で試してみろ」で済む話だし．