• かちびと.net

    少しのjQueryコードでWordPressのコメント欄にリアルタイムプレビュー機能を加える方法です。長いコメントを書くようなコンテンツだと、コメントを確認するユーザーはストレスになりますのでプレビュー機能があると素敵ですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

少しのjQueryコードでWordPressのコメント欄にリアルタイムプレビュー機能を加える

スポンサーリンク

少しのコードで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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services