ライブで更新するコメントプリビュー

かきかた帖

テキストエリアのキーアップイベントで動作する。
ライブプレビューを、チュートリアルをみながら、作成してみた。

残念ながら、チュートリアルのコードでは、私の力では、うまく動作しなかったので、
ハードルを更に下げて、動くものを作った。

本家のチュートリアル:Tutorials:Really Simple Live Comment Preview

【メモ】

.replace(/\n/g, "<br />")

は、オブジェクトを返すから、つなげて使えるんだって

javascriptの正規表現


コメントプリビューのコード

utf-8

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
(function($){
jQuery(function() {
jQuery("#commentform").parent().before('<div id="preview-box"><div class="comment-by">ライブコメントプリビュー</div><div id="live-preview"></div></div>');

   var $comment = ''; // that's two single quotation-marks at the end
   jQuery('#comment').keyup(function() {
     $comment = $(this).val();
     $comment = $comment.replace(/\n/g, "<br />")
       .replace(/\n\n+/g, '<br /><br />');
     jQuery('#live-preview').html( $comment );
   });
});
})(jQuery);

//-->
</script>
<style type="text/css">
#preview-box{border:1px solid #ccc;width:200px;height:100px;overflow:auto;}
#comment{width:200px;height:100px;}
</style>
<title>jQueryライブコメントプリビュー</title>
</head>
<body>
<div id="header" class="borders">
<h2 id="title">jQueryライブコメントプリビュー</h2>
</div>
<div id="common">

<div>
<form action="Comment_Preview.php" method="post" id="commentform">
   <p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
   <p>
     <input name="submit" id="submit" tabindex="5" value="Submit Comment"
 type="submit" class="button">
     <input name="comment_post_ID" value="30" type="hidden">
   </p>
</form>