テキストエリアの表示文字の改行問題

このQ&Aのポイント
  • テキストエリアの表示文字に関する問題が発生しています。結果を表示する際に、データとデータの間に数行の改行が入ってしまいます。テキストエリアの位置の変更など試してみましたが、同じ問題が発生しています。
  • セレクトボックスの表示では改行がなく期待通りに表示されていますが、テキストエリアの表示では数行の改行が入ってしまいます。アドバイスをいただきたいです。
  • テキストエリアの表示文字の改行問題です。結果を表示する際に、データとデータの間に数行の改行が入ります。セレクトボックスでは改行がないため、同じようにテキストエリアでも改行がないように表示させたいです。
回答を見る
  • ベストアンサー

テキストエリアの表示文字

result の中身を以下のようにして、テキストエリアで表示させようと思いました。 結果は、表示はされるのですが、データとデータの間に数行の改行が入って表示されてしまいます。 <c:forEach item="${result}"> <textarea><c:out value="${result}"></textarea> </c:forEach> <textarea>、<c:out value="${result}">、</textarea>の位置を変えたりしてみたのですが、結果は同じでした。 同じ方法で、セレクトボックスには改行なく期待通りに表示されたので、テキストエリアでもできると思ったのですが・・・ アドバイスよろしくお願いします。

noname#82982
noname#82982
  • HTML
  • 回答数5
  • ありがとう数1

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.5

・ <textarea>の外枠は見えていますか? ・ 単純なことから確認していきましょう。 <textarea> <c:forEach var="plan" items="${result['vacation']}" varStatus="st"> <c:if test = "${plan['ID']=='101'}"> ${st.index}:【ABC】 </c:if> </c:forEach> </textarea> を試してみてください。どんな結果でしょう。 ・ 次は、 ${st.current}: 【ABC】 ・ いよいよ <textarea> <c:forEach var="plan" items="${result['vacation']}"> <c:if test = "${plan['ID']=='101'}"> <c:out value="${plan['PLACE']}"/> 【】 </c:if> </c:forEach> や <textarea> <c:forEach var="plan" items="${result['vacation']}"> <c:if test = "${plan['ID']=='101'}"> 【<c:out value="${plan['DATE']}"/>】 </c:if> </c:forEach> を少しずつ試しましょう。

noname#82982
質問者

お礼

提案していただいたものを試した結果、やはりデータ自体には問題がなさそうでしたが、あいかわらず表示が変なままでした。 どんなものを出力させても、表示される構造が変わらなかったので、やはり<textarea>、表示文字、</textarea>の位置の問題かと思い、色々試してみたらうまくいきました。 <textarea>、表示文字、を同じ行につらつらつなげて書き、閉じタグだけをまとめて次の行につらつら書きました。(閉じタグの行のインデントは0にして…)↓ <textarea><c:forEach var="plan" items="${result['vacation']}"><c:if test = "${plan['ID']=='101'}"><c:out value="${plan['PLACE']}"/>【<c:out value="${plan['DATE']}"/>】 </c:if></c:forEach></textarea> あきらめて、他の方法を考えようかと思っていましたが、こちらで質問をして、autyさんにお返事いただけて本当によかったと思っています。 ありがとうございました。 こういう場所での質問、実は苦手だったのですが(そんなこともわからないのか、ときつい言葉をもらって終わりだという先入観がありました)、これを機にまた質問をさせていただくことがあるかもしれません。ご縁があれば、またよろしくお願いいたします。

その他の回答 (4)

  • auty
  • ベストアンサー率58% (284/486)
回答No.4

<textarea> <c:forEach var="plan" items="${result['vacation']}"> <c:if test = "${plan['ID']=='101'}"> <c:out value="${plan['PLACE']}"/> 【<c:out value="${plan['DATE']}"/>】 </c:if> </c:forEach> </textarea> を試してみてください。

noname#82982
質問者

補足

リアルタイムのアドバイスありがたいです。 心より感謝いたします。 アドバイスを試してみましたが・・・ ******* 現状 ********** resultの1つ目の項目:値1-1resultの2つ目の項目:【値2-1】 resultの1つ目の項目:値1-2resultの2つ目の項目:【値2-2】 resultの1つ目の項目:値1-3resultの2つ目の項目:【値2-3】 ******* アドバイス適用後 ********** resultの1つ目の項目:値1-1resultの2つ目の項目:【値2-1】 resultの1つ目の項目:値1-2resultの2つ目の項目:【値2-2】 resultの1つ目の項目:値1-3resultの2つ目の項目:【値2-3】 です。 始めのデータの前にも改行が入るようになりました。 別の出力方法を考えた方がいいのでしょうか?

  • auty
  • ベストアンサー率58% (284/486)
回答No.3

実際にコードを示してもらえますか。

noname#82982
質問者

補足

実際のコードです。 <c:forEach var="plan" items="${result['vacation']}"> <c:if test = "${plan['ID']=='101'}"> <textarea><c:out value="${plan['PLACE']}"/> 【<c:out value="${plan['DATE']}"/>】</textarea> </c:if> </c:forEach> よろしくお願いします。

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

確かめていませんが、ひょっとして <textarea> <c:forEach var="rec" items="${result}"> <c:out value="${rec}"> </c:forEach> </textarea> の様な形が正解ではありませんか。 必要なら改行も加える。 <c:out value='${rec+"\n"}'>

noname#82982
質問者

補足

すみません。 先ほどの補足が間違っていましたので、この場で訂正させていただきたいと思います。 ******* 期待している形 ********** resultの1つ目の項目:値1-1resultの2つ目の項目:【値2-1】 resultの1つ目の項目:値1-2resultの2つ目の項目:【値2-2】 resultの1つ目の項目:値1-3resultの2つ目の項目:【値2-3】 ******* 現状 ********** resultの1つ目の項目:値1-1resultの2つ目の項目:【値2-1】 resultの1つ目の項目:値1-2resultの2つ目の項目:【値2-2】 resultの1つ目の項目:値1-3resultの2つ目の項目:【値2-3】 です。 実際はご指摘のとおり、var属性指定しています。 以前これがなくてもやれた経験があった気がしたので、質問内容を簡潔にしたかったため、省略したつもりでした。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

${result}の中に改行文字が含まれているのでは。

noname#82982
質問者

補足

アドバイスありがとうございます。 質問の補足をさせていただこうと思います。 正確には <c:forEach item="${result}"> <textarea>resultの1つ目の項目:<c:out value="${result['item1']}"/>resultの2つ目の項目:【<c:out value="${result['item2']}"/>】 </c:forEach> のようなコードです。 ご指摘の通り、resultの中身に改行があるとすれば、【】の位置もずれてくると思うのですが、【】はきちんと表示されています。 ******* 期待している形 ********** resultの1つ目の項目:値1 resultの2つ目の項目:【値2】 ******* 現状 ********** resultの1つ目の項目:値1 resultの2つ目の項目:【値2】

関連するQ&A

  • テキストエリア内の改行禁止

    テキストエリア内での改行を禁止するタグを教えてください。 wrap="off" は試したのですが、うまくいきません。 <TEXTAREA rows="1" cols="20" name="list1" class="min2"></TEXTAREA> どうか、よろしくお願いします。 表示上も、出来れば改行しないようにしたいのですが、 出来なければ、結果のみ改行しない形でも構いません。 どうか、よろしくお願いします!

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

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

  • JS テキストエリアを多色表示させるには?

    JavaScriptでテキストエリアの数字だけ 赤字にすることはできますか? 「できません」と即答しそうですが、 工夫すれば「できました」になります。(添付図参照) このように、テキストエリアを表示するには どんなコードでできますか? <div class="container"> <textarea class="textArea" readonly></textarea> </div> <script> //テキストエリアに表示するデータ const data = [ ["== The Body Mass Index (BMI) RESULT =="], [" "], ["DANDY 身長 170cm, 体重 70Kg, BMI: 24.2, Normal"], ["CHUBBY 身長 160cm, 体重 70Kg, BMI: 27.3, OverWeight"], ["FATMAN 身長 150cm, 体重 70Kg, BMI: 31.1, Obese Class I"], ]; </script>

  • テキストエリア内の改行もそのままクリップボードへ

    テキストエリアをクリック→テキストエリア内の内容がコピーされる。 というページを作成しています。 <textarea cols="65" rows="6" onclick="this.select();clipboardData.setData('text',this.value);"> ○○○ ●●● △△△ 111111 222222 </textarea> この内容だと、テキストエリア内の改行が反映されず、コピーされたものを他の場所に貼り付けると、すべて横に繋がった1行の文になってしまいます。 これを、目に見えているまま、改行も含めてそのままコピーさせるには、どうすればいいですか? ちなみに、必要な情報な情報かどうかわかりませんが、同様のテキストエリアが同一ページ内に複数あります。 テキストエリアをクリックでコピーではなく、コピーボタンを押下でコピーでも構いませんが、コピーされるとテキストエリアの色が反転(?)するという動作がほしいと思っています。 説明が下手ですみません…よろしくお願いします。

  • テキストエリア内の文字が表示されない

    PCからタグ打ちでテキストエリアを作り、 中にはリンクタグを入れました。 PCからも携帯(ドコモ)からも正常に表示されるのですが、 auのW62SHからはテキストエリア内の文字が表示されていないと言われました。 このようにしました↓ <form action="" style="margin:0;"> <textarea cols="30" rows="2" name="link"> <a href="アドレス"></a> </textarea></form> どこか間違えているのか、 それとも携帯の機種の問題でしょうか? よろしければ教えてください。 よろしくお願いいたします。

  • ボタンをクリックするとテキストエリアに文字が表示される。

    はじめまして 下記内容のJavaScriptを見つけたのですが これをどうにか違うものにしたいのです。 <html> <head> <TITLE>テキストエリアに複数項表示する</TITLE> <script language="JavaScript"><!-- function setChars() { str1="テキストエリアに"; str2="複数項にわたる文字を"; str3="表示します。"; document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3; } /--></script> </head> <body> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> <input type="button"value="複数行表示"onClick="setChars()"> </form> </body> </html> ------------------------------------------------ 例えば (月・火・水・木)とそれぞれのボタンがあるとします。 そのボタンを押すと、複数行テキストへ 月曜→○○○○ 火曜→○○○○ 水曜→○○○○ 木曜→○○○○ というように、表示させたいのです。 また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。 自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。 お忙しいところ大変申し訳ありませんが、 上記に記載した内容のスクリプトはありますでしょうか。 ご返答いただけると幸いです。

  • テキストエリア内の文字の装飾

    <textarea>で囲んだ文章を、部分的に ・色を変えたり ・太字にしたり ・大きさを変えたり etc... したいのですが、このエリアで囲まれた文章は <br>すら、htmlとして認識されませんよね? (素直に記述上で改行すれば、反映されますが) テキストエリア内で、htmlのように文字修飾をするには どうすればよいのでしょうか? ついでに、テキストエリアの背景なのも設定できる ものなのでしょうか? フレームとして、新たなページを1つ作るのは できるだけ避けたいのです。

    • ベストアンサー
    • HTML
  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 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>

  • あらかじめ入力されたテキストエリア内のバイト数表示

    以下のようなスクリプトで、テキストエリアに入力された文字のバイト数をカウントしているのですが、 あらかじめテキストエリアに文字が入力されてる場合に「0文字」と表示されます。 ページを開いたとき、あらかじめテキストエリアに文字が入力されてる場合に、そのバイト数を 表示させる方法はあるでしょうか。 もし、おわかりになる方がおられましたら、ご教示いただければ幸いです。 function ShowLength( str ) { len = 0; for(i=0;i<str.length;i++) { var c = str.charCodeAt(i); if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){ len += 1; } else { len += 2; } } document.getElementById("inputlength").innerHTML = len + "文字"; } <textarea onkeyup="ShowLength(this.value);"></textarea> ちなみに、onload="ShowLength(this.value);"では上手くいきませんでした。 宜しくお願い申し上げます。

  • テキストエリアの長さ(表示文字数)が違う?

    ジャンルを迷ったのですが... CGIを改造中です。テキストエリアを利用してスクロールする長文を表示させようとしています。 もちろんですが、管理画面(入力画面)もテキストエリアです。 ここでものすごく変な事が起きています。 表示画面では、<TEXTAREA rows="19" cols="23">と表示してあり、全角11文字・半角22文字で折り返しています。 管理画面では、<TEXTAREA cols="19" rows="10" name="com1">と表示してあり、全角11文字・"半角16文字"で折り返しています。 なんでこんな差が出るのでしょうか? ちなみに、ヘッダー部分はサブルーチンを使ってどちらも同じですし、スタイルシートももちろん一緒です。

専門家に質問してみよう