ライブコメントプレビュー

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

テキストエリアに入力した文字をその場で確認できる「ライブコメントプレビュー」機能。けっこう前にEmotional Webでやってるの見て、（ここはjQuery使ってたんだけど）これくらいならライブラリ使わなくてもできそうだ、と思ってた ...で、書いてみた。

Sample

Script (2007.03.10)

  1. window.onload = function() {
  2. if(!document.getElementById) { return; }
  3. target = document.getElementById("testForm");
  4. var obj = '<h3>Live Comment Preview</h3><p id="pretext"></p>';
  5. var flag = 0;
  6.  
  7. target.text.onfocus = function() {
  8. if(flag == 0)
  9. {
  10. target.insertAdjacentHTML('beforeEnd', obj);
  11. flag = 1;
  12. }
  13. target.text.onkeyup = function(){ preview(target) };
  14. };
  15. }

上記が起動および生成部分。実行タイミングはonkeyup。生成したタグの挿入にinsertAdjacentHTMLメソッドを使うことで、タグの記述を1行にまとめてあります（4行目）。ただしinsertAdjacentは普通に使うとFirefoxで無効なので、ちょっとしたトリックを使ってます。

  1. function preview(target) {
  2. var text = target.text.value;
  3. text = text.replace(/\&/g,'&amp;');
  4. text = text.replace(/\</g,'&lt;');
  5. text = text.replace(/\>/g,'&gt;');
  6. text = text.replace(/\"/g,'&quot;');
  7. text = text.replace(/\'/g,'&#39;');
  8. text = text.replace(/\n/g,'<br />\n');
  9. document.getElementById('pretext').innerHTML = text;
  10. };

上記が描写部分。前Ver.だとセキュリティ的に不安だという声があったので、HTMLタグのサニタイズ処理を加えてあります。これでよほどのエッジ・ケースでもなければ大丈夫。プレビュー部分自体にはシステムは絡まないし、ね。

» 前Ver.を確認する

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。