プロジェクトでは、入力ボックスで画像の貼り付けをサポートする必要があることがよくあります。現時点では、入力ボックスの使用ではtextarea需要を満たすことができません。入力ボックスをリッチ テキスト入力ボックスに変更する必要があります。つまり、div を使用する必要があります。タグを作成し、contenteditableタグの属性を設定します。
<div class="form-control"
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable>
</div>
達成される効果placeholderは、入力ボックスにコンテンツがない場合にプロンプトを表示し、ユーザーがコンテンツを入力するとプロンプトが消えることです。新しく追加された疑似クラス要素
である疑似要素の導入: emptyは、子ノードのない要素を選択するために使用されます。ここでの子ノードには、要素ノードとテキスト ノード (スペースを含む) が含まれます。コメント、処理命令、コンテンツ属性のセットCSSを介したものは空かどうかの判定に影響を与えません。HTML では、処理ディレクティブは、HTML ドキュメントの解析、レンダリング、実行方法に関する特定の指示をブラウザーに提供するために使用される特別なタグまたはコメントです。一般的な処理命令は次のとおりです。css3
:empty:empty
<!DOCTYPE>: このディレクティブはドキュメントのタイプを定義し、ブラウザがページを正しく解析してレンダリングできるようにします。
<!-- -->: HTMLのコメントタグで、ここに記述した内容はブラウザからユーザーに提示されるのではなく、開発者向けのメモとしてのみ使用されます。
<?xml?>: これは、XML ドキュメントのバージョンとエンコーディングを指定するために使用される XML 宣言ディレクティブです。
<?php ?>: これは PHP 処理命令であり、サーバー側の PHP コードを HTML ドキュメントに埋め込んで動的コンテンツ生成を実現するために使用されます。
<% %>: ASPやJSPなどのサーバーサイドスクリプト言語の処理指示タグで、 と同様に、<?php ?>対応するスクリプトコードを埋め込むために使用されます。
コメントを除いて、ほとんどの処理命令はサーバー側の対話に関連しており、有効にするにはサーバー側で対応する処理が必要であることに注意してください。
:emptyコンテンツのないリッチ テキスト ボックスのスタイルを設定するために疑似要素を使用できますが、開始タグと終了タグの間に改行やスペースを入れることはできないことに注意してください。スペースや改行も同様に使用されるためです。div子ノードがあるとみなされます。
<style>
div.form-control:empty:before{
content: attr(placeholder);
color:#bbb;
}
</style>
<div class="form-control="
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable></div>
初期表示:
テキストを入力:
