リアルタイムでコメントをプレビュー

１．コメントのtextareaにプレビュー用の記述を追加
コメントのtextareaに以下の赤字の部分を追加します。

<textarea id="comment-text" name="text" rows="10" cols="30" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

２．プレビュー用のチェックボタンを追加

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビュー

３．プレビューを表示させたいところに以下のソースを追加
赤字の文字部分はプレビュー表示が不可能な環境・設定時に表示されます。
styleの中身は各自の好みに合わせて変えるべし（このままだと緑字になりますので^^;）。

<div id="comment_preview" style="color:#9DA970; margin-top:10px;">
<p>ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。</p>
</div>

４．プレビュー用のスクリプト

●HTMLタグを許可していない場合

３の下に追加。赤字の部分を自分好みに編集します。
青字の部分は１の青字部分と同じ文字にすること。

<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}

// コメントプレビュー機能のスクリプトです
function doCommentPreview(mode) {

// コメント入力テキストエリアのidを指定します
var textAreaId = 'comment-text';

// プレビューを表示するタグのid属性
var previewAreaId = 'comment_preview';

// コメントプレビュー欄初期表示文字 または、画像タグ
// コメントが何も入力されていない時に表示される文字になります
var initString = 'ここにコメントのプレビューが表示されます。';

if ((null == mode || mode != 'init') && isCommentPreview == 0) return;

if (!isDoCommentPreview()) return;

if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {
return;
} else if (null != mode && mode == 'init') {
getElementCommentPreview(previewAreaId).innerHTML = initString;
return;
}

var s = getStringCommentPreview(textAreaId);
if (null == s || '' == s || '<br />' == s) {
s = initString;
}

if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}

function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('<').join('<!-- ');
s = s.split('>').join(' -->');
s = s.split('(').join('（');
s = s.split(')').join('）');
s = s.split('\'').join('’');
s = s.split('\n').join('<br />');
return s;
}

function getElementCommentPreview(e, f) {
var l = (document.layers) ? 1 : 0;
if(l) {
f=(f) ? f : self;
var a = f.document.layers;
if (a[e]) return a[e];
for (var w = 0; w < a.length;) {
return getElementCommentPreview(e, a[w++]);
}
}
if (document.all) return document.all[e];
return document.getElementById(e);
}

function isDoCommentPreview() {
var ua = navigator.userAgent;
var doNotAgentList = [
ua.indexOf('Opera/6') != -1,
ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1
]
for (var i = 0; i < doNotAgentList.length; i++) {
if (doNotAgentList[i]) return false;
}
return true;
}
doCommentPreview('init');
//-->
</script>

＊MTの場合はHTMLタグを許可しない設定にすると、タグ部分は全部消えた状態で投稿されます。しかし参考先のソースでは、やむやむさんのだとHTMLタグが有効になってしまうし、stroll::blogさんのところのように実体文字参照に置き換えても正しいプレビューにならないので、それは困る…。
で、頭をひねって、<は<!--に、>は-->に置き換わるようにしてみました。これで全てのタグを無効化すると同時にプレビュー画面からも消し去ることができたと思います。

●HTMLタグを有効にしている場合
MTの設定でHTMLタグを有効にしている場合は、上のソースから緑字の部分を削除すればタグのきいた状態でプレビューできるようになります。
ただ１つ問題点がありまして、そうすると全てのタグが有効になって見えてしまうのです。MTの設定で許可されるタグは、初期設定ではa href, b, i, br/, p, strong, em, ul, ol, li, blockquote, preの１２種類です。なのにプレビュー画面では使えないはずの<font>や<table>タグなども全部きいてしまいます。投稿者を混乱させないように、使えるタグを明記したり注意書きを添えるなどしておくといいと思います。

＜2006.10.28追記＞プレビュー画面で許可しているタグのみ有効にする方法を思いつきましたので、HTMLタグを有効にしている場合は以下の方法を試してみて下さい。

緑字の部分の下に、許可するタグから<!--  -->を除去する記述を追加します。3.3なら以下の赤字を追加すればMTの設定と同じになると思います。3.2以前を使っている場合、許可タグをカスタマイズしている場合は自分の設定に合わせて増減してみて下さい。

s = s.split('<').join('<!-- ');
s = s.split('>').join(' -->');
s = s.split('<!-- b -->').join('<b>');
s = s.split('<!-- /b -->').join('</b>');
s = s.split('<!-- i -->').join('<i>');
s = s.split('<!-- /i -->').join('</i>');
s = s.split('<!-- strong -->').join('<strong>');
s = s.split('<!-- /strong -->').join('</strong>');
s = s.split('<!-- em -->').join('<em>');
s = s.split('<!-- /em -->').join('</em>');
s = s.split('<!-- ul -->').join('<ul>');
s = s.split('<!-- /ul -->').join('</ul>');
s = s.split('<!-- ol -->').join('<ol>');
s = s.split('<!-- /ol -->').join('</ol>');
s = s.split('<!-- li -->').join('<li>');
s = s.split('<!-- /li -->').join('</li>');
s = s.split('<!-- pre -->').join('<pre>');
s = s.split('<!-- /pre -->').join('</pre>');
s = s.split('<!-- a href').join('<a href');
s = s.split('<!-- /a -->').join('</a>');
s = s.split('<!-- blockquote -->').join('<blockquote>');
s = s.split('<!-- /blockquote -->').join('</blockquote>');

こうしておくと許可されたタグ以外は全部無効になるので、「プレビューでは見えてたのに投稿したら消えてた」みたいな紛らわしさもなくなると思います。

補足事項
・プレビュー文字列の幅をコメント表示部分と同じにすると、文字の折り返し地点が正確にプレビューできて、固定幅デザインの場合レイアウトの確認に重宝します。
・<ul><ol><pre><blockquote>系は行間などが改行のしかたによっては正確にプレビューできないこともあるため、これらのタグを使う場合はMT本来のプレビューも併用することをおすすめします（<pre>タグなどはMT自体の挙動もおかしいので使わない方が無難な気が…^^;）。

（2006.10.25　安全のための記述および補足事項を追加）
（2006.10.28　HTMLタグを許可している場合の覚え書きを変更）