textarea.value は代入すると値が変わる

tech

04:02

以下のような挙動をする。

var textarea = document.createElement('textarea');
textarea.value = "\r\n";
encodeURIComponent(textarea.value);
//=> "%0A"

この挙動、現在のブラウザではバグではなくて、仕様である。どういうことかというと、HTML Standard で明言されている

For historical reasons, the element's value is normalised in three different ways for three different purposes. The raw value is the value as it was originally set. It is not normalized. The API value is the value used in the value IDL attribute. It is normalised so that line breaks use U+000A LINE FEED (LF) characters. Finally, there is the value, as used in form submission and other processing models in this specification. It is normalised so that line breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.

https://html.spec.whatwg.org/multipage/forms.html#concept-textarea-api-value

value プロパティ代入動作 (Getter) は raw value の代入として働き、取得動作 (Setter) は API value の取得して働くという非対称的な挙動を示す。そして raw value を取得する方法はない。

関連エントリー