Cómo hacer que el elemento contenteditable solo ingrese texto sin formato 00 Zhang Xinxu
1. Revisa el pasado y aprende lo nuevo
Hace muchos años, espera un minuto, déjame buscar contenteditable (esquina superior derecha), ja, fue en 2010, escribí. Un artículo "div simula campos de texto de área de texto para lograr fácilmente una alta adaptabilidad, que es la aplicación de contenteditable.
Aunque el uso del campo de texto simulado contenteditable compatible con todos los navegadores puede lograr una muy buena experiencia de apertura automática según la altura del contenido, existe el gran problema de que el contenido HTML se puede pegar directamente. como se muestra a continuación:
El artículo anterior mencionó el método de filtrar HTML para garantizar que el contenido sea texto puro. Sin embargo, el problema con este método es:
Hay un desfase de tiempo desde que se completa el pegado hasta el final del filtrado, y los usuarios tienen una mala experiencia al ver el contenido rápidamente;
La posición del cursor cambiará, ya no es la posición de enfoque anterior;
En aquel entonces, mi dibujo estaba roto, por lo que solo estaba en el nivel anterior. De hecho, es una mejor manera de controlar el elemento contenteditable para ingresar solo texto sin formato.
2. Métodos de control CSS que no tienen nada que ver con el atributo contenteditable
Para hacer que un elemento div sea editable, es decir, legible y escribible, el atributo contenteditable es el más utilizado. Método para aplicaciones front-end Básicamente, todo el mundo lo sabe. Sin embargo, me temo que hay muchos menos estudiantes que saben que existen atributos en CSS que pueden hacer que los elementos comunes sean legibles y escribibles.
Aparece el protagonista: user-modify.
Los valores de atributos admitidos son los siguientes:
user-modify: solo lectura;
modificación de usuario: lectura-escritura;
modificación de usuario: solo escritura;
modificación de usuario: lectura-escritura-solo texto sin formato;
dónde, escribe -pero no te preocupes, en esta era, básicamente no hay soporte para el navegador, y probablemente no lo habrá en el futuro. solo lectura significa solo lectura, que es el estado predeterminado de los elementos ordinarios. Luego, lectura-escritura y lectura-escritura-solo texto sin formato harán que el elemento se comporte como un campo de texto, permitiendo enfocar e ingresar contenido.
Puede hacer clic aquí: Demostración del comportamiento del atributo de modificación del usuario de CSS
Verá que se establecen dos valores de lectura-escritura y lectura-escritura-solo texto sin formato.
El elemento de etiqueta se puede enfocar:
La diferencia entre los dos es que uno puede ingresar texto enriquecido, mientras que el siguiente solo puede ingresar texto sin formato. Por ejemplo, copiamos de una determinada página web. al mismo tiempo, pegue un contenido en él y eche un vistazo:
Bien, en este punto, la respuesta al título de este artículo ya está ahí. Es decir, establezca el elemento:
user-modify: read-write-plaintext-only
Puede hacer que el elemento sea editable y solo se pueda ingresar texto sin formato, y se comporta como si el área de texto fuera lo mismo que el área de texto.
¿No es genial? Sin embargo, lamento decirle que actualmente solo los navegadores del kernel de Webkit admiten el valor de solo lectura-escritura-texto sin formato. Por lo tanto, nuestro uso es en realidad:
-webkit-user-modify: lectura-escritura. -plaintext-only
Podemos utilizarlo en terminales móviles, así como en proyectos web de escritorio que sólo necesiten tener en cuenta el contenido del webkit.
3. Método de control HTML que utiliza valores de atributos contenteditable estándar
Ejem, pregunta: en HTML, ¿cuáles son los valores de atributos admitidos por contenteditable?
Cuando se lanzó TutuSimple, solo tenía contenteditable="true" y contenteditable="false" en mi mente. Más tarde descubrí que era demasiado ingenuo. El nuevo borrador decía claramente que hay múltiples. otros valores de atributos:
El atributo contenteditable es un atributo enumerado
cuyas palabras clave son la cadena vacía (""), "events", "caret", "typing",
“solo texto sin formato”, “verdadero” y “falso” Hay un estado adicional,
el estado de herencia, que es el valor predeterminado faltante (y el
valor predeterminado).
La visualización vertical es (excluyendo la herencia heredada predeterminada):
contenteditable=""
contenteditable= "eventos"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable= "false"
No me preguntes, no sé para qué sirven "eventos" y "caret", oye, pero sé acerca de "solo texto sin formato", que puede hacer que el área de edición solo sea accesible para escribiendo texto sin formato. No es necesaria una demostración aquí, solo el cuadro a continuación. Puede probarlo para ver si puede crear texto enriquecido.
Si descubres que, inesperadamente, puedes obtener texto enriquecido, significa que no estás usando Chrome y otros navegadores.
En otras palabras, contenteditable="plaintext-only" es lo mismo que CSS-webkit-user-modify: read-write-plaintext-only. Actualmente, solo es mejor compatible con el navegador Chrome.
Entonces, si su proyecto todavía tiene muchos usuarios del navegador IE8, solo puedo sentir lástima por usted porque no puede usar cosas maravillosas de inmediato. Como último recurso, busque el siguiente método.
4. Método de control JS para controlar el evento de pegado
Si simplemente tocamos el teclado, el contenido de entrada es en realidad texto sin formato. Excepto en algunas circunstancias especiales, por ejemplo, el cuadro de edición del navegador IE agregará automáticamente enlaces a direcciones URL calificadas. La contaminación del texto enriquecido se produce principalmente al copiar y pegar. Por lo tanto, si podemos realizar un filtrado HTML en el contenido del portapapeles al pegar y luego insertar manualmente el contenido, ¿no sería posible? resolvió perfectamente el problema de no poder ingresar texto enriquecido