textareaで入力した文字を改行したままで表示したいのですが。

解決済

質問者：flas222
質問日時：2007/11/01 17:25
回答数：3件

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか？

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
<SCRIPT language="JavaScript">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： suzuki-_-
回答日時：2007/11/01 18:12

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;
}

- 3
- 件

通報する

この回答へのお礼

回答ありがとうございます。
split、joinは初めて見ました。
\nを<br>に置き換えるのですね。
ちなみにreplaceでもできるのかと思って試しましたが、
1行目しかしてくれないのでwhileとか組み合わせればできそうですが、こちらの方が簡潔でわかりやすいですね。
ありがとうございました。

通報する

お礼日時：2007/11/02 10:31

No.3

回答者： himajin100000
回答日時：2007/11/01 21:53

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>

<p><textarea cols="30" rows="10" id="textN"></textarea></p>
<p><input type="button" value=" 確認 " onclick="check()" /></p>
<p id="test" >
</p>
</body>
</html>