« 黒猫ってむずかしぃ~ | メイン | Σ┏(|||`□´|||;;)┓おたふくですか »

2005年05月25日

●コメントプレビュー表示

これ、ずーーーーーーーーっとやりたかったんです。
やっとできましたぁ!ヾ(@⌒▽⌒@)ノ
コメントプレビュー。コメントを書くときに、下にずらずらとリアルタイムにプレビューがでるんです。
見やすくないですかね?なんちゅうか誤字脱字が減るような気がします。(なんとなく。笑)

何度か前々からトライしてたんだけど、どーにもできなかったのですよ。
なんと、原因は 追加しましょう といわれているタグの部分が2箇所あり
(それぞれどーいう意味かいまだにわかりません。汗)
違う1箇所の方に追加しては、できないできないどうしてだ?と思ってました( ̄ー ̄;)
まぁ、できたってことでよしとしますか。

[魔]Magic&white さんを参考にさせていただきました。

以下、自分のための覚書

コメント入力部分の下記の部分に、赤字を追加

<textarea tabindex="2" id="text" name="text" rows="10" cols="50" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

次にプレビューを表示させたい場所に下記を追加する

<label for="comment_preview">comment preview:</label>
<div class="entry_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。。</div>

上記タグの真下に 下記の Javascript を追加する

<script type="text/javascript">
<!--
// コメントプレビュー
function doCommentPreview(mode) {
// コメント入力テキストエリアのid属性
var textAreaId = 'text';

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

// コメントプレビュー欄初期表示文字 または、画像タグ
var initString = 'ここにコメントのプレビューが表示されます。';

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('\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>

以上で修正完了! あとは個別アーカイブの再構築をして作動していればOKです( ̄ー ̄)

コメント

プレビュ見てみたくて、書いてます。
ほほぅ~こりゃ~イイっっ
にぼママのはどんどん進化してってすばらしいね。
わたしのとこのプログもどうにかして欲しい。>Biglobe

おもしろいでしょ?便利でしょ?( ̄ー ̄)
どこのブログでもできるはずなんだけど、色々な機能を取り入れるのか
取り入れないのかは、各プロバイダーブログの管理者の好みなんだろうね。

へたこと言えないけど、管理画面で個人アーカイブがいじれれば
コメントプレビューについてはできるはずよ。
でもヘンにいじるとおかしくなるので、自信がない人にはお勧めはできないです。

コメントする