質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

452閲覧

htmlのtextarea の「折返し」を、サーバ側で「改行」として認識させたい。

20200812_javaer

総合スコア11

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2024/10/05 13:08

編集2024/10/06 01:47

実現したいこと

htmlのtextarea の「折返し」を、サーバ側で「改行」として認識させたい。

発生している問題・分からないこと

htmlのtextarea の「折返し」が、サーバ側で「改行」として認識されない。
そのため、改行無しの1行の長い文字列になっている。

該当のソースコード

<div id="reason" class="table-container"> <h3>理由</h3> <textarea id="reason_text" cols="116" wrap="hard"></textarea> </div>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

Googleで検索しましたが、どのサイトも、「cols、wrap="hard"を指定すれば、改行として認識される」との内容でした。

補足

textarea の内容をformのhiddenにセットし、それをサーバに渡していることが「改行」として認識されない要因かもしれません。とはいえ、hiddenにセットしてサーバに渡すことが要件につき、現時点でこれを変更できません。

ちなみに、textareaのcssは、以下の通りです。

word-break: break-all;
margin-top:1px;
margin-bottom:20px;
background:#fff;
border:#aaa 1px solid;
height:308px;
overflow-x: hidden;
overflow-y: hidden;
padding-left:5px;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2024/10/07 00:56

回答はしておきましたが、そもそもどうしてその実装が必要なのでしょう? 希望内容によっては別の解決策があるかもしれません
20200812_javaer

2024/10/07 04:06

ユーザが、画面のtextarea に「理由」を入力し、それを書面に印刷します。印刷は、javaのitextでPDFを生成し、それから書面に印刷します。「折返し」だと画面に表示されている理由と、書面に印刷された理由で「折返し」位置にずれが生じます。そこで、「折返し」をサーバ側で「改行」として認識させ、画面と書面で、ずれが生じないようにすることが目的です。 画面でtextareaのデータをhiddenにセットしてからサーバに渡す仕様の意図は、前任者が開発した画面につき、不明です。
guest

回答3

1

type=hidden に値をコピーするときに、単純に value プロパティを読むのではなく、フォーム送信に使われる値をコピーすればよいでしょう。

  • <textarea> を、送信するフォームとは別の <form> で囲み、name 属性を付ける
  • コピー時には FormData から値を得る

html

1<h3>理由</h3> 2<form id=f0> 3<textarea name="reason_text" cols="116" wrap="hard"></textarea> 4</form>

js

1 // コピー時の処理 2 const fd = new FormData(document.querySelector('#f0')); 3 hidden_input.value = fd.get('reason_text');

投稿2024/10/07 05:04

int32_t

総合スコア21756

yambejp👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

非表示のtextareaはレンダリングされていないから駄目なのでは?
正直フォントやサイズによって見た目の改行位置はかわってくるのであまりスマートな実装だとはおもえないですけどね・・・
どうしてもというのであれば昔はやった表示の外にhtml要素を移動してしまうという方法もありますが、これもブラウザの実装が異なったり制限が入ったりでいたちごっこだった記憶があります。

html

1<?PHP 2var_dump($_POST); 3?> 4<style> 5textarea{font-family: inherit;} 6[name=fuga]{display:none;} 7[name=piyo]{position:absolute;top:-999px;} 8</style> 9<form method="post"> 10<div id="reason" class="table-container"> 11<h3>理由</h3> 12<textarea name="hoge" wrap="hard" cols=25 rows=10> 13wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww 14llllllllllllllllllllllllllllllllllllllll 15</textarea> 16<textarea name="fuga" wrap="hard" cols=25 rows=10> 17wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww 18llllllllllllllllllllllllllllllllllllllll 19</textarea> 20<textarea name="piyo" wrap="hard" cols=25 rows=10> 21wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww 22llllllllllllllllllllllllllllllllllllllll 23</textarea> 24</div> 25<input type="submit" value="go"> 26</form>

※サーバーサイドの確認が必要なので便宜上PHPで処理をいれていますが、他の言語でも同等の確認になると思います

投稿2024/10/07 00:53

yambejp

総合スコア116849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea
を見るとwrap="hard"は全ブラウザは対応していないみたいです。
Firefox、Safari、webview of iOS が駄目ということで、これに頼るのは厳しいですね。
Firefox on Win10でやってみましたが、書いてあるとおりCRLF挿入されずでした。

自分で文字数カウントして折り曲げるくらいでしょうか。

投稿2024/10/05 13:33

編集2024/10/05 13:33
otn

総合スコア85962

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otn

2024/10/05 13:37

> 自分で文字数カウントして折り曲げるくらいでしょうか。 しかし、そのうちには対応されるだろうから、それまでの暫定策なわけで、自分がこういう状況になったら、悩みそうです。
20200812_javaer

2024/10/06 01:47

ご回答頂き、ありがとうございます。 補足にも追記しましたが、textarea の内容をformのhiddenにセットし、それをサーバに渡していることが「改行」として認識されない要因かもしれません。とはいえ、hiddenにセットしてサーバに渡すことが要件につき、現時点でこれを変更できません。
otn

2024/10/06 03:27 編集

ブラウザはEdgeやChrome限定で良いということですかね。 > textarea の内容をformのhidden 記述が変ですがあ、状況から推察すると、 「textareaの中味をJavaScriptで取得して、typeがhiddenのinputタグのvalueにセットしている」 ということですかね。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea に「フォームの送信において、どのように値を折り返すかを制御するかを示します。」と書いてある通りかと思いますが、textareaを送信するのでなく、JavaScriptで読み取るのであれば、wrap属性は関係ないでしょうね。 textareaをformの中に入れて、直接送信しないのならば、 (全角半角混在時にどうするか決めて)JavaScriptで適宜改行文字を挿入するしかないと思います。
20200812_javaer

2024/10/07 03:56

ご確認頂きまして、ありがとうございます。 ブラウザは、EdgeとChrome限定です。
otn

2024/10/07 12:11

「textareaをそのままformで送信する」案がベストアンサーということは、 > hiddenにセットしてサーバに渡すことが要件につき、現時点でこれを変更できません。 という制約が変更できるようになったと言うことですかね。であれば、元々何の問題も無かったのでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問