Hay muchas ocasiones en el proyecto donde el cuadro de entrada necesita admitir el pegado de imágenes. En este momento, el uso del textareacuadro de entrada no puede satisfacer la demanda. Debe cambiar el cuadro de entrada a un cuadro de entrada de texto enriquecido, es decir, usar un div. etiqueta y establezca contenteditableatributos para la etiqueta.
<div class="form-control"
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable>
</div>
El efecto que se debe lograr placeholderes mostrar un mensaje cuando no hay contenido en el cuadro de entrada, y el mensaje desaparece después de que el usuario ingresa el contenido.
Presentamos un pseudoelemento, que es un css3elemento de pseudoclase recién agregado
: vacío
:empty se usa para seleccionar elementos sin nodos secundarios. Los nodos secundarios aquí incluyen nodos de elementos y nodos de texto (incluidos espacios). Conjunto de comentarios, instrucciones de procesamiento y atributos de contenido. a través de CSS no Afectará :emptyel juicio de si está vacío.
En HTML, una directiva de procesamiento es una etiqueta o comentario especial que se utiliza para proporcionar instrucciones específicas al navegador sobre cómo analizar, representar o ejecutar un documento HTML. Las siguientes son instrucciones de procesamiento comunes:
<!DOCTYPE>: esta directiva define el tipo de documento y ayuda al navegador a analizar y representar la página correctamente.
<!-- -->: Esta es una etiqueta de comentario en HTML. El contenido escrito aquí no será presentado al usuario por el navegador, sino que solo se utilizará como una nota para el desarrollador.
<?xml?>: Esta es una directiva de declaración XML que se utiliza para especificar la versión y codificación del documento XML.
<?php ?>: Esta es una instrucción de procesamiento PHP que se utiliza para incrustar código PHP del lado del servidor en documentos HTML para lograr una generación de contenido dinámico.
<% %>: Esta es la etiqueta de instrucción de procesamiento de los lenguajes de secuencias de comandos del lado del servidor como ASP y JSP, similar a <?php ?>, que se utiliza para incrustar el código de secuencia de comandos correspondiente.
Tenga en cuenta que, excepto los comentarios, la mayoría de las instrucciones de procesamiento están relacionadas con la interacción del lado del servidor y requieren el procesamiento correspondiente en el lado del servidor para que surtan efecto.
Podemos usar :emptypseudoelementos para establecer el estilo del cuadro de texto enriquecido cuando no tiene contenido, pero cabe señalar que divno puede haber saltos de línea y espacios entre la etiqueta de inicio y la etiqueta de fin, porque también habrá espacios y saltos de línea. Se considera que tiene nodos secundarios.
<style>
div.form-control:empty:before{
content: attr(placeholder);
color:#bbb;
}
</style>
<div class="form-control="
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable></div>
Pantalla inicial:
Introduzca texto:
