こんにちは教えてください。
あるフォームのテキストエリアに入力された値を他のページに渡す必要があります。
その時、テキストエリアに入力された値に含まれる改行キーも一緒に渡したいのですが、うまく行きません。

strUrl="mypage.php?Memo="+document.frmMypage.txtMemo.value
例えばこんな感じで渡しています。
できれば改行キーを"<br>"に変換して渡したいのですが・・・。
とりあえず、改行キーを判断する方法がJavaScriptにあるのかどうかだけでも教えていただけないでしょうか。
よろしくお願いいたします。

環境はWinNT4.0(SR6)
IE5.0
(JavaScriptはIE4.0以上で動くことを予想しています)

このQ&Aに関連する最新のQ&A

A 回答 (2件)

replace()を使えば、簡単に変換できます。


こんな↓コードで試してみたらどうでしょう。

<html>
<head>
<script language="javascript">
<!--
function movetx()
{
  with (document.frm) {
    tx2.value = tx1.value.replace(/\r\n/g, '<br>');
  }
}
//-->
</script>
</head>

<body>
<center>
<form name="frm">
 <textarea name="tx1" cols="40" rows="10"></textarea><br>
 <input type="button" value="↓" onClick="movetx()"><br>
 <textarea name="tx2" cols="40" rows="10"></textarea><br>
</form>
</center>
</body>
</html>

上のテキストエリアに改行入りの文章を書いてボタンを押すと、改行を<br>に変換して一行になった文字列が下のテキストエリアに表示されます。
#UNIXとかだと、改行って\nだったような・・・。あれ、Macはどうだっけ??

この回答への補足

leaz024さん、すみません、今ポイントをつけようと思ったら、
leaz024さんが書いてくれたコードが実行されてしまい、
エラーが出て「締め切り」ボタンが押せなくなってしまっています。
教えてgooに聞いてみますので、ポイントはもう少々お待ちください。
すみません。

補足日時:2001/05/11 17:12
    • good
    • 0
この回答へのお礼

ありがとうございます!
完璧です。ありがとうございました。
そのままパクれそうですが、今後の勉強のためにも
少しかみ砕いて自分のものにしたいと思います。
すごく助かりました。
japascriptでもreplaceができることがわかってうれしいです。
勉強になりました!!
# OSによって改行コードが違うんですね。要調査です。

お礼日時:2001/05/11 17:09

unescape("%0D%0A")でよいかと思います。


テキストエリアに入っている文字列を1文字ずつ取得し、
改行コードを見つけたら"<br>"に置換すればよいんでしょうか?

下記URLは改行コードについて書かれてはいませんが、ご参考までに…。

参考URL:http://www2s.biglobe.ne.jp/~tomoya_n/jscript/pag …
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
改行コードがわかっただけで大収穫でした。
あとは自分なりにコーディングできそうです。
ありがとうございました。

お礼日時:2001/05/11 17:03

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjavascriptで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>

Aベストアンサー

恐らくCGIの結果を、window.open でスタイル指定したウィンドウに表示したいのでしょうね。その際のフォームデータの渡し方で困っているのだと思います。

No.1さんのように escape 関数を使うのも手ですが、escape はブラウザによっては日本語を Unicode にしてしまうので、CGIスクリプトが Unicode に対応していなければ文字化けしてしまいます。

このような場合は、まず window.open で別窓を作り、そのウィンドウ宛にフォームを送信する、という方法が有効です。(下記参照)

・FORMタグを次のように変更します。

<FORM action="/cgi-bin/test.cgi" method="post" target="newwin" onSubmit="make_newwin(this)">

・make_newwin 関数を作成します。

function make_newwin(f) {
  var w = window.open('about:blank', f.target, 'スタイル設定');
  w.focus();
}

フォームを送信しようとすると FORM の onSubmit により、make_newwin が(送信前に)実行されます。この時、引数に this(FORM自身)を渡し、window.open の2番目の引数(target指定)に f.target(FORMのtarget属性値)を指定するのがミソです。

その後フォームの送信が行われますが、この時既に newwin という(スタイル指定された)ウィンドウが存在していますので、そちらに送信される、というわけです。

またこの方法では、JavaScript をオフにしている人でも、スタイル指定がされないだけで、別画面にCGIの結果を表示することができます。
(質問の方法では何も起こりません。)

恐らくCGIの結果を、window.open でスタイル指定したウィンドウに表示したいのでしょうね。その際のフォームデータの渡し方で困っているのだと思います。

No.1さんのように escape 関数を使うのも手ですが、escape はブラウザによっては日本語を Unicode にしてしまうので、CGIスクリプトが Unicode に対応していなければ文字化けしてしまいます。

このような場合は、まず window.open で別窓を作り、そのウィンドウ宛にフォームを送信する、という方法が有効です。(下記参照)

・FORMタグを次のように...続きを読む

QFirefoxでのテキストエリアに入力した文字の改行

Firefoxでのテキストエリアに入力した文字の改行について質問させてください。

http://oshiete1.goo.ne.jp/qa2691799.html

↑のページを参考にテキストエリアに入力したテキストがリアルタイムで確認できるページを作成しました。

IEではテキストエリア内の改行がちゃんと反映されたのですが、Firefoxではテキストエリア内の改行が反映されずに、エンターキーを押すと半角スペース?になるだけで一連の文として出力されてしまいます。

どなたかこの現象の解決策をお知りの方がいらっしゃいましたらご教授ください。
よろしくお願いします。

Aベストアンサー

どのようなコードで実行しているのか不明なのでなんともわかりませんが…

参考になさっている回答の、No5までちゃんと読みましたか?
No3までだと単純にvalueを写しているだけなので、HTML上では改行されません。
テキストエリア内の改行をHTMLの改行(<br>など)に変換するか、または、<pre>などを利用する必要があります。
(↑上記質問の回答No4に書いてあるのと同じことですが…)

一応、FFで実験してみましたが、問題なく改行されます。
(document.allなどの表記は少々古いような気もしますが…)


ん?・・・・ひょっとして、回答No5の修正をIEの方しかやってないとか?
回答のコードはIEとFFで場合わけして記しているので、修正箇所は合計2箇所になるはずなんですが…
まぁ、IEでもgetElementByIdは使えると思いますので(少なくともIE6以降は)コードの記述も後半だけにしちゃってもOKなはずですけど。

(↑推測なので、違っていたら失礼)

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

テキストエリアにコメントを入力して、その内容を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、という処理を考えているのですが、改行コードがなくなってしまいます。

改行コードを維持したままプレビューエリアにコメントを表示させることはできますでしょうか?
どこを修正すればいいか教えて下さい。

テキストエリアにコメントを入力して、その内容を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="p...続きを読む

Aベストアンサー

横からですが、

>上記ですと改行コードが入っていない状態とプレビュー表示が変わりません。
ブラウザによって改行コードが違うことがあるので、\nだけで判断するようにしてあげればよいのでは?

comment_details=comment_details.replace(/\n/g,"<br />").replace(/\r/g,"");

Qプルダウンでテキストエリア表示Javascript

JavaScriptをはじめて扱う初心者です。
このサンプルのテキストエリア(複数行)をプルダウンで内容を変更できるようにしたいと思っています
http://www3.plala.or.jp/moananja/iroiro/Material/Calculator/Calc3.html

プルダウンで項目Aを選択すると
 AAA
 AAA
 AAA
項目Bを選択すると
 BBB
 BBB
とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか?
ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした
ご教授よろしくお願いいたします
http://q.hatena.ne.jp/1190481115

Aベストアンサー

合計と消費税を削除してみました。お試しください。

<html>
<head>
<script language="javascript">
var oMenu={
"menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]],
"menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]],
"menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]]
};
var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人数","subtotal":"合計材料数"};
window.onload=function(){
//選択項目の作成
var oSelCategory=getObj("selCategory");
for(strCategory in oMenu)
oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory);
//計算表の初期化
makeTable("menuA");
}
var getObj=function(strID){return document.getElementById(strID)};
var makeElem=function(strName){return document.createElement(strName)};
//計算表の作成
var makeTable=function(strListName){
var oTBL=getObj("tblCalc");
while(oTBL.hasChildNodes())
oTBL.removeChild(oTBL.lastChild);
var oTBODY=makeElem("TBODY");
oTBL.appendChild(oTBODY);

//表のヘッダーを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
for(strKey in oItems){
var oTH=makeElem("TH");
oTH.appendChild(document.createTextNode(oItems[strKey]));
oTR.appendChild(oTH);
}
//表のボディを追加
for(var i=0;i<oMenu[strListName].length;i++){
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//項目名、単価、個数、小計
for(strKey in oItems){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(strKey=="title")
oTD.appendChild(document.createTextNode(oMenu[strListName][i][0]));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id=strKey+"_"+i;
oINPUT.style.width="100%";
oINPUT.style.textAlign="right";
if(strKey=="amount")
{
oINPUT.onkeyup=function(){calcTotal()};
oINPUT.style.imeMode = "disabled";
}
else
oINPUT.readOnly=true;
if(strKey=="require")
oINPUT.value=oMenu[strListName][i][1];
oTD.appendChild(oINPUT);
}
}
}

}
//合計値の計算
var calcTotal = function(){
var strCurListName=getObj("selCategory").value;
//小計を計算
for(var i=0;i<oMenu[strCurListName].length;i++){
var oRequire=getObj("require_"+i);
var oAmount=getObj("amount_"+i);
var oSubTotal=getObj("subtotal_"+i);
if( oRequire && oAmount && oSubTotal ){
if(oRequire.value !="" && !isNaN(oRequire.value) && oAmount.value !="" && !isNaN(oAmount.value))
oSubTotal.value=parseFloat(oRequire.value)*parseFloat(oAmount.value);
else
oSubTotal.value="";
}
}
}

</script>
</head>
<body>
<SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/>
<TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE>
</body>
</html>

合計と消費税を削除してみました。お試しください。

<html>
<head>
<script language="javascript">
var oMenu={
"menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]],
"menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]],
"menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]]
};
var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人数","subtotal":"合計材料数"};
window....続きを読む

Qjavascriptでボタンを押すたびにテキストエリアを追加

javascriptでボタンを押すたびにテキストエリアを追加しようとしています。
下記の内容を応用して
1 テキストエリア(1)
2 テキストエリア(2)
3 テキストエリア(3)
4 テキストエリア(4)



ボタンを押すたびに追加され15個まで増やすという風にしようとしているのですが、うまくいきません。テーブルの中に入るところまでは良くのですが、連番の数字を入れるのができません。

var tag_num=4;
function myTextAreaAdd(obj){
var max=15;
var c=count("howto");
if(c>=max)
return false;
var oTag = document.createElement("textarea");
oTag.setAttribute("name", "howto" + tag_num++);
var oDiv = document.getElementById("area");
oDiv.appendChild(oTag);
if(c>=max-1)
obj.disabled=true;
}
教えてください。宜しくお願いします。

javascriptでボタンを押すたびにテキストエリアを追加しようとしています。
下記の内容を応用して
1 テキストエリア(1)
2 テキストエリア(2)
3 テキストエリア(3)
4 テキストエリア(4)



ボタンを押すたびに追加され15個まで増やすという風にしようとしているのですが、うまくいきません。テーブルの中に入るところまでは良くのですが、連番の数字を入れるのができません。

var tag_num=4;
function myTextAreaAdd(obj){
var max=15;
var c=count("howto");
if(c>=max)
ret...続きを読む

Aベストアンサー

ちょっと微妙だけど、各行の共通部分が多いならcloneNodeする方が
いいとおもいますよ。

で、こんな感じで・・・

<script>
function myTextAreaAdd(obj){
var max=15;
var objTRs=document.getElementById("table").getElementsByTagName("tr");
var tag_num=objTRs.length;
var newTR=objTRs[0].cloneNode(true);
var objTD=newTR.getElementsByTagName("td")[0];
while(n=objTD.lastChild) objTD.removeChild(n);
var newTXT=document.createTextNode((++tag_num).toString());
objTD.appendChild(newTXT);
var nTA=newTR.getElementsByTagName("textarea")[0];
nTA.setAttribute("name","howto"+newTXT);
objTRs[0].parentNode.appendChild(newTR);
if(tag_num>=max) obj.disabled=true;
}
</script>
<table id="table" summary="">
<tr><td>1</td><td><textarea name="howto1"></textarea></td></tr>
<tr><td>2</td><td><textarea name="howto2"></textarea></td></tr>
<tr><td>3</td><td><textarea name="howto3"></textarea></td></tr>
<tr><td>4</td><td><textarea name="howto4"></textarea></td></tr>
</table>
<input type="button" value="add" onclick="myTextAreaAdd(this)">

ちょっと微妙だけど、各行の共通部分が多いならcloneNodeする方が
いいとおもいますよ。

で、こんな感じで・・・

<script>
function myTextAreaAdd(obj){
var max=15;
var objTRs=document.getElementById("table").getElementsByTagName("tr");
var tag_num=objTRs.length;
var newTR=objTRs[0].cloneNode(true);
var objTD=newTR.getElementsByTagName("td")[0];
while(n=objTD.lastChild) objTD.removeChild(n);
var newTXT=document.createTextNode((++tag_num).toString());
...続きを読む


人気Q&Aランキング

おすすめ情報