HTML: textareaはくせ者だ

textarea

この要素の中心となるのはtagで囲まれた文字列。通常はvalue属性でそれを読み書きしますが、他にもinnerHTML、textContent、childNodes[0].dataなどといったものでほぼ代用できます。innerTextは常に空文字を返すようです。

空要素

<textarea></textarea>

property	文字列	length
value		0
innerHTML		0
textContent		0
childNodes[0].data	参照不可	参照不可

当然ですがchildNodes[0]はundefinedなので、dataも不在なり

改行1個

<textarea>
</textarea>

なんと空要素の場合と同じ振る舞いです。直観に反する信じがたい結果です。表は省略。ちなみにouterHTMLは

<textarea></textarea>

となっており、改行は見当たりません。

改行2個

<textarea>

</textarea>

property	文字列	length
value	\n	1
innerHTML	\n	1
textContent	\n	1
childNodes[0].data	\n	1

直観に反するややふざけた結果です。Netscape7とかいう化石browerは文字列を\rだとぬかしやがります。

改行1個 + 改行以外

<textarea>
A</textarea>

property	文字列	length
value	A	1
innerHTML	A	1
textContent	A	1
childNodes[0].data	A	1

ある意味ふざけています。1文字目がAなんだ…。ふ～ん…。

改行以外 + 改行1個

<textarea>A
</textarea>

property	文字列	length
value	A\n	2
innerHTML	A\n	2
textContent	A\n	2
childNodes[0].data	A\n	2

まもとのようです

改行1個 + 改行以外 + 改行1個

<textarea>
A
</textarea>

なんと改行以外 + 改行1個と同じ結果です。

実体参照文字

<textarea>&amp;&lt;&gt;&copy;&quot;</textarea>

property	文字列	length
value	&<>©"	5
innerHTML	&amp;&lt;&gt;©"	15
textContent	&<>©"	5
childNodes[0].data	&<>©"	5

innerHTMLさんがふざけ始めました。実体参照の種類で扱いを変えてきやがりましたよ。

実体参照崩し

実体参照崩しとはsemicolonを省略する記法です。同様に数値参照崩しと呼ばれる技も存在していると言わざるを得ません。

<textarea>&amp&lt&gt&copy&quot&#123&#124</textarea>

property	文字列	length
value	&<>©"{|	7
innerHTML	&amp;&lt;&gt;©"{|	17
textContent	&<>©"{|	7
childNodes[0].data	&<>©"{|	7

innerHTMLさんは気を利かしてsemicolon補完計画を発動していますね。

value詐称

<textarea value=A>BC</textarea>

property	文字列	length
value	BC	2
innerHTML	BC	2
textContent	BC	2
childNodes[0].data	BC	2
defaultValue	BC	2
textareaの表示	BC	2

valueの設定が無視されてしまいました…。valueを読み取っても設定と異なる値です。

<textarea value=A></textarea>

property	文字列	length
value		0
innerHTML		0
textContent		0
childNodes[0].data	参照不可	参照不可
defaultValue		0
textareaの表示		0

value属性だけ記述してもやはり無かった事に…

propertyの相互作用

value、defaultValue、innerText、innerHTML、textContent、childNodes[0].dataを書き替えると、お互いどのように作用するのか検証。

• value

  他者に影響無し

• defaultValue

  innerTextに影響無し

• innerText

  自身に影響無し

• innerHTML

  innerTextに影響無し

• textContent

  innerTextに影響無し

• childNodes[0].data

  innerTextに影響無し

innerTextの書き替えに驚愕です。全てに影響を与える一方で、自身は空文字列に戻ります。
一般的に読み書きする事が最も多いvalueは、他者から完全無視される最強のボッチ野郎という事が分かります。

property値の深掘り

前述の相互作用を踏まえます。

• valueやchildNodes[0].dataに空文字列やnullを与えてやるとtextareaは空欄になります。暗黙型変換で文字列"null"が降臨する事はないので注意
• 他のpropertyも上記同様ですが、ついでにchildNodes[0]が消滅します

object.innerText="&<>""

property	length	値
innerHTML	35	&<>"
innerHTML以外	19	&<>"

object.innerHTML="&<>""

property	length	値
innerHTML以外	4	&<>"

object.innerHTML="&<br>"

property	length	値
innerHTML	15	&<br>
innerHTML以外	5	&<br>

innerHTMLさんが自分に嘘をついています。さすがtextarea様だぜ…。

改行

object.innerHTML="\r\n \r \n"

property	length	値
全て	5	\n \n\ \n

浮動小数点数の誤差発生

object.innerHTML=9999999999999999

property	length	値
全て	17	10000000000000000

多倍長整数

object.innerHTML=9999999999999999n

property	length	値
全て	16	9999999999999999

子要素削除

object.removeChild(object.childNodes[0])

childNodes[0]が消滅し、他のpropertyは空文字列になります

CSSとvalue属性

value属性を動的に書き込んでも属性selectorによるCSSは適用されません。input要素の場合は適用されるんですが…

<style>[value]{color:red}</style>
<textarea onfocus=value=1></textarea>
<textarea value>Schrödinger</textarea>
<textarea value="">の猫は</textarea>
<textarea value=a>2度死ぬ</textarea>

以下の例ではremoveAttributeが仕事してるのかいてないのか…。CSS的にはしているようですがconsole.logは変な事を呟いています

<style>[value]{color:red}</style>
<textarea onfocus="removeAttribute('value');console.log(value)" value=null>Null</textarea>

以下はsetAttributeとgetAttributeの検証。textareaのわがままっぷりには呆れます

<textarea onfocus="setAttribute('value',123);console.log(value,getAttribute('value'))">0</textarea>