- ベストアンサー
textareaで入力した文字を改行したままで表示したいのですが。
textareaに複数行で入力した文字を改行したままで表示したいのですが 改行されずに表示されます。 改行したままで表示するのはどうすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); //一応タグを使えないように置き換える strName = strName.split("<").join("<"); strName = strName.split(">").join(">"); //改行を改行タグに置き換える strName = strName.split("\n").join("<br>"); test.innerHTML = strName; }
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> input { font-size: 12px; } #test{ position:absolute; font-size:24px; white-space:pre; } </style> <script type="text/javascript"> function check(){ var strName; strName = document.getElementById("textN").value; var test = document.getElementById("test"); if (test.textContent){ test.textContent = strName; } else{ test.innerText = strName; } } </script> </head> <body> <!-- form要素を用いると,action属性やmethod属性を指定しなければならなくなるため削除--> <p><textarea cols="30" rows="10" id="textN"></textarea></p> <p><input type="button" value=" 確認 " onclick="check()" /></p> <p id="test" > </p> </body> </html>
お礼
回答ありがとうございます。 試したところうまくいきました。ありがとうございます。 今回は、No2さんの方を利用させて頂きます。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
<DIV id="test" style="position:absolute;font-size:24px;"> </DIV> を <PRE id="test" style="position:absolute;font-size:24px;"> </PRE> にしてみてはどうでしょうか？
お礼
早速回答ありがとうございます。 ですが、変化なしです。ちなみにIE7です。
お礼
回答ありがとうございます。 split、joinは初めて見ました。 \nを<br>に置き換えるのですね。 ちなみにreplaceでもできるのかと思って試しましたが、 1行目しかしてくれないのでwhileとか組み合わせればできそうですが、こちらの方が簡潔でわかりやすいですね。 ありがとうございました。