Textareaの使用上の注意点
2022-01-10 11:34:56
なぜtextareaを特別に取り上げたかというと、textareaというノードが非常に特殊だからです。そして、このノードが特殊であるために、IEと他のブラウザでは解釈が異なるのです。
/{br
少しは売れよ、ははは! 実際には、主な理由は、バグを修正するために、今日の兄弟を助けるために、具体的には、テキストエリアに挿入するために、サーバからデータをプルダウンすることの失敗のために、この状況は、IEの中でだけ。他のブラウザはすべて正常です!
/
/
まず、なぜtextareaが特別なのか?どのフォームプラグインでも、textareaの値は開閉タグの間に書かれるため、DOMから見るとその値はテキストノードとして見ることができ、textarea特有のものとなっています。そして、この特徴のために、innerHTMLの値を変更してもtextareaのテキストを変更することができます。一方、IEはこれをサポートしていますが、あるhtmlタグの動的挿入ができないことがあるのです。
実験してみてはいかがでしょうか。
IEでvalueやinnerTextの代わりにinnerHTML属性を使って、JS経由でHTMLコードを挿入する。
IE9+はテストしていませんが、IE6,7,8はすべてエラーを報告しています。
JSがtextareaに動的にhtmlを挿入できないのはセキュリティ上の理由だと思いますが、注意深い人は、実はhtmlコードを手打ちすれば、textareaは許容範囲であることが分かります。これは実は、文字エスケープという、そういう処理を経ているのだと思います。そう、これだけでhtmlコードを手打ちしたときの成功が説明できるのです。
で、私見ですが、textareaは多くのブラウザでhtml表示に対応していないのに、なぜJS演算はinnerHTML属性を使うのでしょうか?つまり、valueでhtmlコードを挿入しても、innerHTMLで挿入しても、解析されて表示されない(だからtextareaではなくリッチテキストエディタがある)ので、textareaの値を設定するのにvalueを使ってはいけないのでは?
ですから、textareaの値はinnerHTMLで設定するのではなく(firefoxのため、確かにinnerTextでもない)、valueで設定するのが良いと思います。これは、開発者が注意すべきことです。実際、その場しのぎだと思います。
/{br
少しは売れよ、ははは! 実際には、主な理由は、バグを修正するために、今日の兄弟を助けるために、具体的には、テキストエリアに挿入するために、サーバからデータをプルダウンすることの失敗のために、この状況は、IEの中でだけ。他のブラウザはすべて正常です!
/
/
まず、なぜtextareaが特別なのか?どのフォームプラグインでも、textareaの値は開閉タグの間に書かれるため、DOMから見るとその値はテキストノードとして見ることができ、textarea特有のものとなっています。そして、この特徴のために、innerHTMLの値を変更してもtextareaのテキストを変更することができます。一方、IEはこれをサポートしていますが、あるhtmlタグの動的挿入ができないことがあるのです。
実験してみてはいかがでしょうか。
IEでvalueやinnerTextの代わりにinnerHTML属性を使って、JS経由でHTMLコードを挿入する。
IE9+はテストしていませんが、IE6,7,8はすべてエラーを報告しています。
JSがtextareaに動的にhtmlを挿入できないのはセキュリティ上の理由だと思いますが、注意深い人は、実はhtmlコードを手打ちすれば、textareaは許容範囲であることが分かります。これは実は、文字エスケープという、そういう処理を経ているのだと思います。そう、これだけでhtmlコードを手打ちしたときの成功が説明できるのです。
で、私見ですが、textareaは多くのブラウザでhtml表示に対応していないのに、なぜJS演算はinnerHTML属性を使うのでしょうか?つまり、valueでhtmlコードを挿入しても、innerHTMLで挿入しても、解析されて表示されない(だからtextareaではなくリッチテキストエディタがある)ので、textareaの値を設定するのにvalueを使ってはいけないのでは?
ですから、textareaの値はinnerHTMLで設定するのではなく(firefoxのため、確かにinnerTextでもない)、valueで設定するのが良いと思います。これは、開発者が注意すべきことです。実際、その場しのぎだと思います。
関連
-
HTMLテーブルのクロスロー、クロスカラムの操作(rowspan、colspan)
-
htmlはテーブルの幅が無効な問題を解決する
-
n個のコンテナ要素で無限スクロールを実現するコード
-
HTMLでスクリーンショットを撮影し、ローカル画像として保存するための実装コード
-
HTMLでフォームコントロールを無効にする2つの方法 readonly と disabled
-
あなたを救うもの、私の食卓(海友ブログ)
-
行間カラーチェンジを実現するHTML n方法 サンプルコード
-
これからhtmlを学ぶ人のためのhtml基本構文集
-
HTMLマーキー文字のスニペットスクロール
-
正しいHTML、CSS、RSSフィードを検証する無料ツール
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン