少しのコードでWordPressのプラグインを
使わずにリアルタイムコメントプレビュー
機能を加える方法です。殆ど使わない、と
思いますが、他でも応用できるコードなの
で個人的にメモしておきたい。実装には
jQueryを使用します。
コメント欄にコメントを書いていて、長くなってくると確認するのが結構面倒だったりします。長いコメントが入るコンテンツならコメントのプレビュー機能があると親切かもしれません。
コード
こんなの↑
コメントを書いてるとプレビューにも反映される、という仕組みです。
<script type="text/javascript">
jQuery(document).ready(function(){
//プレビュー欄をコメント欄下部に追加。
jQuery("").add("<h3 id='preview-title'>コメントプレビュー欄</h3><div id='comment-preview'></div>").appendTo(document.body);
jQuery("#comment-preview, #preview-title").insertAfter("#comment");
//テキストボックスで叩かれた文字を表示する
var $comment = '';
jQuery('#comment').keyup(function() {
$comment = jQuery(this).val();
$comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
jQuery('#comment-preview').html( $comment );
});
});
</script>jQuery本体は読み込まれてるの前提で。こんな感じのコードを書くだけ。セレクタとかHTMLは必要に応じて便宜変更してください。
プレビュー欄は手動でマークアップしてもいいかもですね・・・keyup()でキーボード操作によるイベントを発生させ、replace()で打たれた文字を先に追加してあったdiv内に表示させます。replace()と正規表現に関してはwebopixelさんの解説が凄く分かりやすかったです。
あとはちょろっとcss
#comment-preview {
border: 1px solid #ccc;
padding: 5px 15px 15px 15px;
}
h3#preview-title {
margin-bottom: 5px
}コメント欄として書きましたけど、コードそのものは工夫次第で地味にいろいろなシーンで応用できるんじゃ無いかなと思います。
以下を参考にしました。デモもあるのでぜひ触ってみてください。
How to Add Live Comment Preview to Comment Textarea without Plugin