HTML5の入力フォームは、よく考えられているが、密かにめんどくさいと感じている、弓削田です。
inputタグには、value属性があり、そのタグの値の管理は、value値のみを管理すればいいわけなんですが、
textareaタグは、value属性は書き込みませんが、value属性で値を取得できます。
そのおかげでトラブルになってしまったという事を書き残しておきたいと思います。
どんなトラブル？
textareaのタグ構成をみると、その内容をtextContentで取得したくなってしまいます。
確かに、textContentを利用して、内容の取得はできるのですが、ここに落とし穴がありました。
それは、textContentは、HTMLとして書き込まれた値が取得されるため、
ユーザーなどがtextareaタグで書き換えた値を取得することはできない
という事だったんですね。
それを知らずに、textContentで値取得をしていたオレ・・・orz
ただ、これまでは、固定値を取得する目的でtextareaを使っていたので、
さほど問題が発生していなかったんですが、
javascriptでvalue値を書き換えた時に、value値とtextContent値が違っているということに気がついて、
調べた結果で分かりました。
textareaの特性
とりあえず、今回やった調査を書き残します。
まず、次のようなtextareaを用意します。
<textarea class="ta" >A</textarea>
この状態でjavascriptの返り値を見てみると、
document.querySelector(".ta").textContent;
> A
document.querySelector(".ta").value;
> A
次に、textareaの値を書き直してみると・・・
document.querySelector(".ta").textContent;
"A"
document.querySelector(".ta").value;
"AAA"
はいはい、textContentは、HTMLソースコードのものが表示されて、valueはリアルなtextareaの値が取得できているようです。
・・・
ここからは、興味本位で実験してみました。
textareaにvalue属性を書いてみるとどうなるのか？
<textarea class="ta" value="A1">A2</textarea>
この状態で、value値とtextContent値を調べてみると、
document.querySelector(".ta").textContent;
> A2
document.querySelector(".ta").value;
> A2
となり、属性に書き込まれ得たvalue値は、もはや亡き者として扱われてしまうのか・・・
document.querySelector(".ta").getAttribute("value");
> A1
なんと！getAttributeだと、書かれたvalue値が取得できてしまいます。
この辺の特性を理解しておかないと、
入力フォームはトラブルが起きてしまうかもね・・・
正しい値管理をするために
value値とtextContentとgetAttributeというように、入力フォームだけでなく、HTMLのDOM構造におけるエレメントには、
属性、プロパティという値が存在し、それらが同じkey名になっていると、こうした混乱が起きてしまいます。
これをミスらず扱うためには、
取得方法と、その特性を十分に理解しておくということが
非常に重要なポイントであると、思われます。
まあ、気になったら今回のように自分で実験すればいいだけなんですけどね。
念の為、複数のブラウザでの挙動を確かめておくことも大事かもしれません。
あれ？意外と労力いるぞ！
なかなか世の中で見ない資料なので、
そのうち、このブログに、研究結果として、まとめておこうかな・・・
