- ベストアンサー
テキストエリアをリアルタイムに表示したい方法
- テキストエリアをフォーム内に入れ、リアルタイムに表示させる方法を教えてください。
- 現在テキストエリアをフォームに入れるとリアルタイムに表示されません。どうすればリアルタイムに表示させることができるのでしょうか？
- テキストエリアをリアルタイムに表示させる方法がわかりません。お力添えをお願いします。
- momokocyan
- お礼率26% (9/34)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
検証しないままやったのがまずかったようで……orz replace('\n', '<br />') を replace(/\r\n|\r|\n/g, '<br />') の様に書き換えてみてください。これでうまくいくかと。 # 今度は検証しました^^;
その他の回答 (4)
- shogo0809
- ベストアンサー率47% (25/53)
HTML上で文章を改行させるにはいくつか方法があります。例えば こんにちは さようなら と表示させたいなら ・br要素を使う こんにちは<br />さようなら ・pre要素を使う <pre>こんにちは\nさようなら</pre> 他にも色々とありますが、一般的なのは改行を<br />に変換してしまうことでしょう(あまり美しいHTMLとは呼べなくなりますが)。JavaScriptで実現するにはStringオブジェクトのreplaceメソッドを用います。 例： document.all('dispArea').innerHTML = document.all('sourceArea').value.replace('\n', '<br />'); お試し下さいな。
補足
shogo0809様 早速のご回答ありがとうございます。 上記の追加で1行目は改行できたのですが、2行目以降ができません。申し訳ありませんが、もう少しご教授願えないでしょうか。宜しくお願い致します。
- shogo0809
- ベストアンサー率47% (25/53)
追記です……中途半端に編集中のHTMLを貼っちゃいました。正しくは↓です； <html> <head> <script language="javascript" type="text/javascript"> function myFunc() { if (document.all) { document.all('dispArea').innerHTML = document.all('sourceArea').value; } else if (document.getElementById) { document.getElementById('dispArea').innerHTML = document.getElementById('sourceArea').value; } } function setDefault() { var defaultStr = "<h1>hello</h1>\n<p>ここを書き換えると下の表示も変化します。</p><button onclick=\"alert('Hi')\">TEST</button>\n<hr>" if (document.all) { document.all('sourceArea').value = defaultStr; } else if (document.getElementById) { document.getElementById('sourceArea').value = defaultStr; } } </script> </head> <body onload="setDefault(); myFunc();"> <h2>HTML編集をリアルタイムに反映させる例</h2> <hr> <form method="post" action=""> <textarea id="sourceArea" style="width: 450px; height: 200px;" onkeyup="myFunc()"></textarea> </form> <div id="dispArea" style="width: 450px; height: 200px;"></div> </body> </html> 久々の凡ミスにしょんぼりorz
補足
度々ありがとうございます。 思っていたように表現する事が出来ました。ありがとうございます。 それとあと一つわがままを言っても宜しいでしょうか？ プレビューが表示される時、テキストエリアに入力した改行を有効にするにはどのようにすれば宜しいでしょうか？ わがままばかり言って申し分かりませんが、宜しくお願いします。
- shogo0809
- ベストアンサー率47% (25/53)
#1です。 このソースの問題はtextarea要素のname属性に「form1」が指定されていることです。そこを「sourceArea」に書き換えるだけで思い通りに動くと思います。 お節介ついでに↑のミスを見つける前にこっちで検証用に書いたHTMLおいておきますね。なにをどうしているのかは自力で調べてみてください :-) <html> <head> <script language="javascript" type="text/javascript"> function myFunc() { if (document.all) { document.all('dispArea').innerHTML = document.all('sourceArea').value; } else if (document.getElementById) { document.getElementById('dispArea').innerHTML = document.getElementById('sourceArea').value; } } var defaultStr = '<h1>hello</h1>\n<p>ここを書き換えると下の表示も変化します。</p><button onclick="alert(\'Hi\')">TEST</button>\n<hr>'; </script> </head> <body onload="form1.sourceArea.value = defaultStr; myFunc();"> <h2>HTML編集をリアルタイムに反映させる例</h2> <hr> <form method="post" action=""> <textarea id="sourceArea" style="width: 450px; height: 200px;" onkeyup="myFunc()"></textarea> </form> <div id="dispArea" style="width: 450px; height: 200px;"></div> </body> </html>
- shogo0809
- ベストアンサー率47% (25/53)
momokocyanさんの提示されたソースをファイルに保存し、試してみました。 検証に使用したOS：Windows XP 〃 ブラウザ：IE6, Firefox 結果：入力内容が即座にHTMLとして反映されました。 というわけで、正常に動いているように見えます。 他のOS、ブラウザは手元にないため検証していませんが…… 念のため、テストに使用している環境と、どのような入力でどのような動作(結果)を求めているか、そして意図しない結果としてどのような動作が起きているかを教えていただければ、解決に繋がるかも知れません。
補足
shogo0809様 早速のご回答ありがとうございます。とりあえずテキストエリアをフォーム内に入れたものです。以下をWindows XPのIE6で表示しみるとエラーで 'sourceArea'は宣言されていませんと表示されます。 書き方が間違っているのでしょうか？宜しくお願い致します。 <html> <head> <script language="javascript"> function myFunc() { dispArea.innerHTML = sourceArea.value; } var defaultStr = "<h1>hello</h1>\n<p>ここを書き換えると下の表示も変化します。</p><button onclick=\"alert('Hi')\">TEST</button>\n<hr>" </script> </head> <body onload="sourceArea.value=defaultStr;myFunc()"> <h2>HTML編集をリアルタイムに反映させる例</h2> <hr> <form name="form1" method="post" action=""> <textarea name="form1" id="sourceArea" style="width:450px;height:200px;" onkeyup="myFunc()"> </textarea> </form> <div id="dispArea" style="width:450px;height:200px;"> </div> </body> </html>
お礼
おはようございます。 度々のご回答まことにありがとうございます。 大変満足しております。私にとって今までの最優良回答者様です。 個人的には100ポイント以上差し上げたいです。 まだまだ未熟であり、わからないことが多々あります。その時は是非またご教授願えたらと思います。