テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には非常に特殊だからです。このノードは特別なため、IE と他のブラウザでは解釈が異なります。

しばらくハラハラさせておきますね、ハハハ！実際、主な理由は、今日、先輩がバグを修正するのを手伝ったことです。具体的には、サーバーからデータを取得してテキストエリアに挿入するときに障害が発生したためです。この状況は IE でのみ発生しました。他のブラウザはすべて正常です！

まず、textarea が特別なのはなぜでしょうか?すべてのフォームプラグインでは、textarea の値は 2 つの開始タグと終了タグの間に記述されるため、その値は DOM の観点からはテキストノードと見なすことができます。これは textarea に固有のものです。この機能により、innerHTML の値を変更すると、テキストエリアのテキストを変更することができます。IE はこれをサポートしていますが、HTML タグを動的に挿入する機能は許可されていません。

実験してみるのもいいかもしれません:

IE で JS を介して HTML コードを挿入する場合、value または innerText の代わりに innerHTML 属性が使用されます。

IE9+ はテストしていませんが、IE6、7、8 ではすべてエラーが報告されます。

JS がテキストエリアに HTML を動的に挿入できないのはおそらくセキュリティ上の理由によるものですが、注意深い人なら、HTML コードを手動で入力するとテキストエリアがそれを受け入れることができることに気付くでしょう。これは実際に、キャラクターの脱出というプロセスを経たと思います。はい、これが HTML コードを手動で入力して成功した唯一の理由です。

私の意見では、多くのブラウザのテキストエリアが HTML 表示をサポートしていないのに、なぜ JS 操作を実行するときに innerHTML 属性を使用する必要があるのでしょうか?つまり、value を使用して HTML コードを挿入しても、innerHTML を使用して HTML コードを挿入しても、解析後には表示されません (textarea の代わりにリッチテキストエディターがあるのはそのためです)。そのため、value を使用して textarea の値を設定しないのはなぜでしょうか。

したがって、textarea の値は innerHTML ではなく (もちろん、Firefox では innerText になる可能性はさらに低くなります)、値を通じて設定する必要があると思います。これは開発者が注意すべき点です。最近見たコードの中には、常に innerHTML を使用するものがあったからです。実際のところ、すべては状況次第だと思います。

<<: MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

>>: ウェブ標準学習リソースの素晴らしいコレクション