HTML タグのコンテンツを編集するには、contenteditable 属性を設定します (textarea を置き換えることができます)

コードをコピー

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

<div contenteditable="true">コンテンツを編集できます</div>

BODY に contenteditable="true" を追加すると、この属性がいかに魔法の力を持つかがわかります。したがって、タグを編集するには、HTML タグに contenteditable="true" 属性を設定できます。

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

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

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

Div+CSS は、HTML5 標準の contenteditable 属性を実現するために、textarea テキストフィールドの高さの適応をどのようにシミュレートしますか。

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

コードをコピー

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

<スタイルタイプ="text/css">
.demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // outline:0px;スタイルソリューション: コンテナーがフォーカスを取得すると、コンテナーは FF ブラウザーで点線フレームの効果を表示します。
.demoEdit p{margin:0px;padding:0px;}
</スタイル>
<div contenteditable="true" style="border:1px solid #dddddd;width:360px;min-height:20px;_height:20px;outline:0px;"></div>
<div コンテンツ編集可能="true" クラス="demoEdit"></div>

添付ファイル:
FF ブラウザでは、コンテナにフォーカスが当たったときに、カーソルの高さがコンテナの高さと同じになったり、カーソルが表示されなかったりします。このとき、コンテナにデフォルトで <br/> や   などのプレースホルダーを追加すると、この問題が解決します。

ここで、Yuzi は、js コードを追加せずに高さを編集して自動的に適応できる別の優れた方法を紹介します。皆さん、目を覚ましてください。Yuzi は DIV をテキストボックスとして直接使用できます。これは TextArea テキストボックスに似ています。さらに重要なのは、DIV のユーザーエクスペリエンスがより完璧でクールであることです。

Html の contentEditable 属性を使用すると、特定の要素の編集可能状態をオンにすることができます。おそらく、contentEditable 属性を使用したことがないか、聞いたこともないかもしれませんが、contentEditable の役割は非常に魔法のようなものです。 div または Web ページ全体、さらに span やその他の要素を書き込み可能にすることができます。最もよく使用されるテキスト入力要素は input と textarea です。contentEditable 属性を使用すると、div、table、p、span、body などの多くの要素にコンテンツを入力できます。特に、contentEditable は HTML5 標準で効果的にサポートされています。ぜひ来て目撃してください。

contentEditable="true" 属性を設定すると、かなり魔法のようになりませんか?ハハハ…

デモページ: http://demo.jb51.net/js/2014/ContentEditable/

特殊効果をつけてみましょう。div要素編集を開いて、画像を挿入できますか？これにはjsを使用する必要があります。

コードをコピー

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

<スクリプト>
関数img(){
var location1 = prompt("画像のアドレスを入力してください:","http://");
if(場所1){
場所1を選択します。
}
}
関数 selImg(s){
if(!s){return false;}
var h = s.substr(s.lastIndexOf(".")+1,3);
if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
編集 = document.getElementById("idEdit")
編集.innerHTML+='<img src='+s+'>'
}
それ以外{
}
}
</スクリプト>
<div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>Yuzi.me</b></div>
<input type="button" name="送信" value="画像を挿入" onclick="img()">

素晴らしい! より多くのエフェクトを使用したい場合は、自分で js コードを記述する必要があります。すべての攻城戦ヒーローがベストを尽くし、共有できることを楽しみにしています!

<<: CSS background-blend-modeの仕組みを深く理解する

>>: jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します