There are many times in the project where the input box needs to support pasting pictures. At this time, using the textareainput box cannot meet the demand. You need to change the input box into a rich text input box, that is, use a div tag and set contenteditableattributes for the tag.
<div class="form-control"
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable>
</div>
The effect to be achieved placeholderis to display a prompt when there is no content in the input box, and the prompt disappears after the user enters the content.
Introducing a pseudo-element, which is a css3newly added pseudo-class element
: empty
:empty is used to select elements without child nodes. The child nodes here include element nodes and text nodes (including spaces). Comments, processing instructions, and content attributes set through CSS are not Will affect :emptythe judgment of whether it is empty.
In HTML, a processing directive is a special tag or comment that is used to provide specific instructions to the browser on how to parse, render, or execute an HTML document. The following are common processing instructions:
<!DOCTYPE>: This directive defines the type of document and helps the browser parse and render the page correctly.
<!-- -->: This is a comment tag in HTML. The content written here will not be presented to the user by the browser, but is only used as a note for the developer.
<?xml?>: This is an XML declaration directive used to specify the version and encoding of the XML document.
<?php ?>: This is a PHP processing instruction, used to embed server-side PHP code into HTML documents to achieve dynamic content generation.
<% %>: This is the processing instruction tag of server-side scripting languages such as ASP and JSP, similar to <?php ?>, used to embed the corresponding script code.
Please note that, except for comments, most processing instructions are related to server-side interaction and require corresponding processing on the server side to take effect.
We can use :emptypseudo elements to set the style of the rich text box when it has no content, but it should be noted that divthere cannot be line breaks and spaces between the start tag and the end tag, because spaces and line breaks will also be regarded as having child nodes.
<style>
div.form-control:empty:before{
content: attr(placeholder);
color:#bbb;
}
</style>
<div class="form-control="
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable></div>
Initial display:
Enter text:
