テキストエリアにコメントを入力して、その内容をDBに保存し、別ページで表示させる入力ページの作成方法

このQ&Aのポイント
  • テキストエリアにコメントを入力して、その内容をDBに保存するための入力ページを作成します。
  • 入力ページにはテキストエリアとプレビューボタンがあり、コメントが入力されたらプレビューボタンをクリックすることで入力内容がプレビューエリアに表示されます。
  • 入力内容に改行が含まれている場合も、改行コードを維持したままプレビューエリアに表示させることができます。
回答を見る
  • ベストアンサー

テキストエリアに入力した改行コードを保持したい

テキストエリアにコメントを入力して、その内容をDBに保存し、別ページで表示させる入力ページの作成で、フォーム内に ・テキストエリアを設置 ・その下に「プレビュー」ボタンを設置 ・その下にプレビューが表示されるエリアを設置 ・一番下にsubmitボタンを設置 test1.phpにて <form name ="form1" method="post" action="test2.php"> <table> <tr><td> <text area name ="comment" id ="comment"> </textarea> </td></tr> <tr><td> <a href="javascript:void(0);" onclick="preview_comment(); "> <img src="preview.jpg"> </a> </td></tr> <tr><td> <span id="preview_comment"> プレビュー </span> </td></tr> </table> <div><input type="submit" value ="submit"></div> </form> head部分に <script language="JavaScript"> <!-- function preview_comment() {var comment_details=document.getElementById("comment").value; document.getElementById("preview_comment").innerHTML=comment_details; } //--> </script> を設置しました。 テキストエリアにコメントを入力し、改行がある場合はその改行コードを保持した状態がプレビューとして表示され、確認をしてOKだったらSubmit、という処理を考えているのですが、改行コードがなくなってしまいます。 改行コードを維持したままプレビューエリアにコメントを表示させることはできますでしょうか? どこを修正すればいいか教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

横からですが、 >上記ですと改行コードが入っていない状態とプレビュー表示が変わりません。 ブラウザによって改行コードが違うことがあるので、\nだけで判断するようにしてあげればよいのでは? comment_details=comment_details.replace(/\n/g,"<br />").replace(/\r/g,"");

changuri
質問者

お礼

有り難うございます。 こちらの方法でうまくいきました。 普段Firefoxしか使用しないので、Firefoxで試していましたが、No.1の方法でIEでは動作していたようです。 ブラウザによる改行コードの違い・・気づきませんでした。 助かりました。有り難うございます。

その他の回答 (1)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

comment_details=comment_details.replace(/\r\n/g,"<br />"); を追記すればいいわ。

changuri
質問者

お礼

早速のお返事有り難うございます。 追記後 <script language="JavaScript"> <!-- function preview_comment() {var comment_details=document.getElementById("comment").value; comment_details=comment_details.replace(/\r\n/g,"<br />"); document.getElementById("preview_comment").innerHTML=comment_details; } //--> </script> だと思うのですが、上記ですと改行コードが入っていない状態とプレビュー表示が変わりません。 追記場所が違いますでしょうか・・?

関連するQ&A

  • テキストエリアについて

    テーブル内にテキストエリアを入れると下に空白(隙間)ができてしまうのですがそれをなくすることはできないでしょうか? 例 <table border="1"> <tr> <td>あいうえお</td> <td rowspan="3"><form name="TxtArea"><textarea rows="10"></textarea></form</td></tr> <tr><td>かきくけこ</td></tr> <tr><td>さしすせそ</td></tr> </table> *<td></td>内に<form></form>が入ってる理由はJavaScriptを使ってテキストエリアに文字を表示させる処理を行っている為です。 この状態でどのようにすれば隙間を消す事ができるでしょうか? もちろん<td></td>内に<form></form>を入れなければ大丈夫な事はわかっていますが、JavaScriptが正常に動作しないのでできません。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • テキストエリアにテキストファイルを改行コードごと読み出すには

    ただ今勉強中のCGIを使って、テキストファイルの編集・上書き保存をテキストエリアから行いたいのですが、テキストエリアに読み込む時に改行コードが読み込めないためか、最後の一行しか表示できません。どのようにすると、改行コードを含めて編集できるのでしょうか? その「できないコード(サブルーチン)」は↓になります。 $commentfile = "comment.txt"; ■ 読み出し sub read_commentfile { local($masg); open(IN, $commentfile); while (<IN>) {$masg = join('',$_);        $massage = $masg; } close(IN); } ■ コメントの編集画面 sub comment { local($html); &read_commentfile; #HTML作成 $html = << "EOM"; <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=$charset"> <title>コメントの編集</title> </head> <body> <form action="$self" method=post> <input type=hidden name=mode value="savecomment"> <hr> コメント<br> <textarea name=masg cols=40 rows=4>$massage</textarea> <br> <input type=submit value=" 更新 "> </form> <hr> </body> </html> EOM &print_html($html); } ■ 上書き保存 sub savecomment { local(@text); push(@text, "$FORM{'masg'}\n"); open(OUT, ">$commentfile"); print OUT @text; close(OUT); } 本来でしたら、ファイルのロック・解除、表ダグ、パスワード等の記述もあるのですが、省いてあります。 よろしくお願い致します。

    • ベストアンサー
    • CGI
  • テキストエリアで改行する

    テキストエリア1の文章をテキストエリア2に追加 するときなどに、コード(テキストエリアにキーボードで 改行するのではなくて)で2,3行改行したいの ですが、どうすればよいでしょうか? setText()で文章を書くときの改行の仕方でもいいです。 教えてください!

    • ベストアンサー
    • Java
  • テキストエリア内の改行

    <textarea cols=  rows= ></textarea> を使ってテキストエリアを作っています。 テキストエリア内に予めコメントを 入れておきたいのですが、そのコメントを 改行したい場合はどうすればいいのでしょうか? <BR>のタグが使えないので困っています。 どなたか教えてください、お願い致します。

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ¥nという文字を使用するのでしょうか? <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>

  • テキストエリアの改行

    HTMLのFORMにあるテキストエリア(name=coment)で例えば ================ こんにちわ やっと台風が 去りましたね。 ================ という用に打ち込んでPerlCGIでその内容を $coment=$in{'coment'}; とすると、変数$comentには 「こんにちわやっと台風が去りましたね。」と入ります。 これを、もとのテキストエリアでの改行を<br>に置き換えて 「こんにちわ<br>やっと台風が<br>去りましたね。」としたいのですが、どうしたらよいものでしょう。

    • ベストアンサー
    • Perl
  • テキストエリアのブラウザ表示について

    以下のコードを書くと、 Chromでは、大きなテキストエリアが表示されますが、 IE8では、2行で小さく表示されてしまいます。 IEでも大きく表示したいです。 ご存知の方がおられましたら教えてください。 よろしくお願い致します。 <table> <TR> <TD> 文: </TD> <TD> <TEXTAREA rows="10px" cols="50px" name="test"> <img src="test.gif\"> </TEXTAREA> </TD> </TR> </table>

    • ベストアンサー
    • HTML
  • javascriptでCGIに値を渡したいのですが、テキストエリアの値で改行コードが消えてしまいます。教えて下さい。

    javascriptでCGIに値を渡したいのですが、テキストエリアの値で改行コードが消えてしまいます。教えて下さい。 別窓ページにてtest.cgiを呼び出し、そのCGIに値を渡したいのですが、 一応値はテキスト形式で渡せるのですが、テキストエリアで入力したものの 改行コードが消えてしまいます。何か良い方法があれば、教えて下さい。 <FORM name="test" ACTION="javascript:test_window_open('/cgi-bin/test.cgi?bikou='+document.test.bikou.value);"> : : <TEXTAREA rows="8" cols="50" name="bikou"></TEXTAREA>

  • テキストエリアの改行を取得したい

    最近CGIを独学ではじめたのですが、複数行のテキストエリアからの文字列の取得をした場合、改行が反映されずに表示されます。 改行コードのようなものは取得されている、とちらりとどこかで見たことがあるのですが、どのように取得して改行させるかが分かりません。 すみませんが、ご存知の方がいらっしゃいましたら教えていただけないでしょうか。 このような感じで書きました。 my $cgi = CGI::new(); my $area = $cgi->param('text'); print "Content-type: text/html\n\n"; print $area;

    • ベストアンサー
    • CGI
  • 追加したテキストボックスとテキストエリアの数の制御

    下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか? あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか? <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>

専門家に質問してみよう