valueにCSSをかける方法をご存知の方はいらっしゃいますか？

下記のように、送信前にjqueryで<textarea>のvalueを改変しています。

しかし送信ボタンクリックするタイミングで、改変後の文字列が表示されてしまいます。
少し見た目が悪いです。

これをCSSでdisplay:none;するように、何か巧く隠す方法はありませんでしょうか？

html
1<form name="post" method="post" action="http://example.com/testpost/">
2  <div>
3    <p>返信先：<span id="nicename">hanako</span></p>
4    <textarea name="message" placeholder="メッセージ"></textarea>
5    <button type="submit" id="submit" name="submit">送信</button>
6  </div>
7  <input name="reply" id="reply" value="1" type="hidden">
8</form>

jQuery
1//送信前に「textarea」の「value」を改変
2$('body').on("click",'#submit',function(e){
3  e.preventDefault();
4  var replyVal = $('#reply').val();
5  if (replyVal !== 0){
6	var nicename = $('#nicename').text();
7    var message = $('textarea').val();
8	
9    //この<span class="hide">と中身を隠したい 
10    $('textarea').val('<span class="hide">'+nicename+'</span>'+message);
11
12	$('form').submit();  
13  } else {
14    $('form').submit();
15  }
16});

コメントアウトしてあるように、送信ボタンクリックするタイミングで//この<span class="hide">と中身を隠したいというのが目的です。
良い方法をご存知の方がいらっしゃいましたら是非教えて下さい。

###補足
文法違反とのご指摘を頂戴致しましたが、事情によりHTMLは変えたくないので良い解決策があれば併せてご助言賜りますようお願い申し上げます。

macaron_xxx

2018/08/24 00:21 編集

HTMLを変えたくない…というのは、当初のですよね？jsで追加された分は変更してもいいのですよね？

minminzemkun

2018/08/24 00:57

仰る通りです。質問文にあるHTMLはそのまま、jsによってのみそれを改変したいと思っております。誤解を招く表現で大変失礼いたしました。ご指摘どうもありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

<textarea> は子要素 <span> を持つことはできません。文法違反です。

サンプル

表示用の textarea と送信用の textarea を分けるのがポイント

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.hidden {
8				visibility: hidden;
9				height: 0;
10				width: 0;
11			}
12		</style>
13	</head>
14	<body>
15		<form action="" method="post">
16			<p>
17				<!-- name 属性をつけない -->
18				<input type="text" id="nicename" value="nicename" />
19			</p>
20			<p>
21				<!-- name 属性をつけない -->
22				<textarea id="text" cols="30" rows="10">メッセージ</textarea>
23			</p>
24
25			<!-- name 属性をつける -->
26			<textarea id="text_sending" name="text_sending" class="hidden"></textarea>
27
28			<p>
29				<button id="btn" type="button">送信</button>
30			</p>
31		</form>
32		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
33		<script type="text/javascript">
34			$(function () {
35				var nicename = $('#nicename').text();
36				var message = $('#text').val();
37				var contents = '<span class="hide">' + nicename + '</span>' + message;
38				$("#text").val(contents);
39				$("#text_sending").val(message);
40				$("#btn").on('click', function () {
41					$('form').submit();
42				});
43			});
44		</script>
45	</body>
46</html>