コードをコピー コードは次のとおりです。<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> 添付ファイル: Html の contentEditable 属性を使用すると、特定の要素の編集可能状態をオンにすることができます。おそらく、contentEditable 属性を使用したことがないか、聞いたこともないかもしれませんが、contentEditable の役割は非常に魔法のようなものです。 div または Web ページ全体、さらに span やその他の要素を書き込み可能にすることができます。最もよく使用されるテキスト入力要素は input と textarea です。contentEditable 属性を使用すると、div、table、p、span、body などの多くの要素にコンテンツを入力できます。特に、contentEditable は HTML5 標準で効果的にサポートされています。ぜひ来て目撃してください。 contentEditable="true" 属性を設定すると、かなり魔法のようになりませんか?ハハハ… 特殊効果をつけてみましょう。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 コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します
NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...
序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...
1.コンテナに入った後 /etc/hosts を cat するコンテナ自体の IP アドレスと (-...
Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...
デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...
MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...
この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...
<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...
目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...
W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
/******************** * キャラクターデバイスドライバー**********...
第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...
Confluence は有料ですが、クラックして使用できます (購入が推奨され、正規版がサポートされ...