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

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/> や &nbsp; などのプレースホルダーを追加すると、この問題が解決します。

ここで、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 コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

推薦する

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

Linux に MySql 5.7.21 をインストールするための詳細な手順

序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...

DockerコンテナのIPアドレスを取得する方法の詳細な説明

1.コンテナに入った後 /etc/hosts を cat するコンテナ自体の IP アドレスと (-...

CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...

MySQLの文字タイプは大文字と小文字を区別します

デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...

MySQL 5.7.18 のダウンロードとインストールの詳細な手順

MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...

MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)

この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...

ウェブ開発で遭遇した問題と経験

<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...

Dockerがログファイルを保存する場所の詳細な説明

目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...

Web デザイン リファレンス Firefox デフォルト スタイル

W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

Docker で Confluence をデプロイするための完全な手順

Confluence は有料ですが、クラックして使用できます (購入が推奨され、正規版がサポートされ...