読者です 読者をやめる 読者になる 読者になる

keima's caprice diary

気付いたことをメモのように綴ります。なるべく義務っぽくならないように気まぐれに記録します。

プレビュー表示script

相変わらずスパムコメントがちょろちょろ来ていますが、とりあえず気にしないことにして、今日はjavascriptを使って、「コメントのプレビュー表示」をやってみました。もとネタはstrolさんのblogに置いてあります。strollさんはとても多くの技術を知っているのでちょくちょく勉強させてもらってます。 

1.コメントを入力する場所(通常はtextareaタグ)を探します。

 そのタグ内にid属性が無い場合は、id="description"と追記しておきます。

 すでに、id属性がある場合は、すでにあるid属性の値(description以外)でも

 okなのでそのままで。

 

2.下記をtextareaタグ中に追記します。

onkeyup="doCommentPreview()" onblur="doCommentPreview()"

3.コメントプレビューを表示したい場所に下記タグを追記します。

<label for="comment_preview">プレビューのタイトル</label><br />

<div class="comment_body" id="comment_preview">ご利用の設定ではプレビューできません。</div><br />

※「ご利用の設定ではプレビューできません。」の部分は、ブラウザの

 JavaScriptがOFFの場合に表示されます。

4.HTML中の{comment_description}という記述を探します。

 その{comment_description}を囲っているタグのclass属性に

 指定されている値を確認します。

 探したclass属性で指定されている値(class="○○○○"の部分)を手順3

 で追加したタグのclass属性にします。

 ※3ではcomment_bodyになっているのでそこを適宜書き直す。

 5.以下のJavaScript<!-- END comment_area -->

 のすぐ上に追記します。

<script type="text/javascript">

<!--

// コメントプレビュー

function doCommentPreview(mode) {

// コメント入力テキストエリアのid属性

var textAreaId = 'description';

// プレビューを表示するタグの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('&amp;');

s = s.split('<').join('&lt;');

s = s.split('>').join('&gt;');

s = s.split('¥'').join('&quot;');

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>

因みにCSSで下記discription属性が設定されていることを前提としています。

.description {

 font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";

 font-size: 10px;

 font-weight: normal;

 color: #000000;

 margin: 0px 0px 0px 0px;

}

※手順1で「すでにある属性」と書きましたが、それが上記と同じ内容なら問題ないです。

以上で、設置完了です。

その他の細かい設定は好きな様にします。