HTMLタグの内容を編集するためのcontenteditable属性を設定する(textareaを置換可能)_HTML/Xhtml_Webページ制作

コードをコピーします

コードは次のとおりです:

内のコンテンツを編集できます。contenteditable="true" を BODY に追加すると、この属性がいかに魔法であるかがわかります。したがって、HTML タグに contenteditable="true" 属性を設定すると、タグを編集できるようになります。

contenteditable 属性はすべてのブラウザと互換性があります (IE6 より前のバージョンの互換性はテストされていません)

場合によっては、DIV を使用して input または textarea を置き換えることで、同じ効果を実現できます。たとえば、ajax を使用する場合、フォームの送信時に DIV のコンテンツを取得できます。

注意深い人は、QQ スペースにコメントを投稿するためのテキスト ボックスが、実際にはテキストエリア テキスト ボックスではなく DIV であることに気づくでしょう。

HTML5 標準の contenteditable 属性を満たすために、Div CSS がテキストエリアのテキストエリアの高さの適応性をシミュレートする方法

この効果は主に、HTML5 の contenteditable 属性をタグに追加することで実現されます (contenteditable: ユーザーがコンテンツの編集を許可されるかどうかを指定します)。優れているのは、IE もこの属性をサポートしているため、心配する必要はありません。互換性の問題については詳しく説明します。
デモ：

コードをコピーします

コードは次のとおりです: