html - vence - se me vencio el seguro del auto
¿Qué elementos se pueden hacer seguros? (2)
Dado que esta es una característica en evolución, la compatibilidad aparente y de baja prioridad de los proveedores de navegadores ha sido incompleta y las regresiones no son infrecuentes. El estado actual de las cosas está evolucionando, así que compruebe los Google, CanIUse, etc., y asegúrese de que haya asistencia para los visitantes de su sitio, todo lo demás es discutible ...
El soporte en Firefox parece ser sólido, al menos para algunos elementos, ahora https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content Funciona bien en Chrome, así como en mis pruebas va Y CanIUse se ve bien: http://caniuse.com/#feat=contenteditable
Sin embargo, hay varios errores diferentes relacionados con la función en los diferentes navegadores, pero para casos de uso simple debería estar bien ahora, a partir de agosto de 2016.
He estado trabajando con contenteditable recientemente en una página HTML5 y encontré errores al usarlo con ciertos elementos, y me gustaría saber dónde y cómo puedo usarlo de manera segura.
Descubrí que hacer que un elemento span se pueda contentar con resultados en algunos comportamientos defectuosos tanto en Firefox 1 como en Chrome 2 . Sin embargo, hacer que una división o section parece completamente segura 3 .
Una pauta que un par de personas ha mencionado es que solo los elementos a nivel de bloque deben ser susceptibles de contenido. Sin embargo, la red de desarrolladores de Mozilla enumera los elementos del encabezado h1 a h6 como elementos de nivel de bloque , y hacer que un elemento del encabezado sea susceptible de ser editado tiene errores en Firefox 4 y puede bloquear la página en Chrome 5 .
Me gustaría poder usar más que solo divs y secciones, pero no tengo claro cuáles son los elementos que puedo convertir en elementos seguros. Con seguridad , me refiero a que al utilizar el elemento en condiciones normales, debería poder realizar tareas de edición normales sin que haga cosas inesperadas o con errores. Debería poder escribir en él, eliminar contenido, cortar, copiar, pegar y mover el cursor del texto y resaltar el texto sin un comportamiento inesperado o extraño.
Entonces, ¿qué elementos puedo realmente hacer contenteditable de forma segura? ¿Hay una categoría específica? ¿Existen ciertos criterios con los que el elemento que se puede contentar con seguridad debe coincidir?
Notas de error:
1. Firefox 21 w / span: el elemento pierde el foco si el cursor de texto se lleva al principio o al final del elemento, pero no si llegó al eliminar el contenido. Resaltar parte del elemento, cortar y luego pegar dividirá el elemento en dos en ese punto y luego insertará un elemento en blanco entre las dos partes, sin colocar realmente el texto que estaba tratando de pegar en ninguna parte.
2. Chrome 27 w / span: si el tramo abarca varias líneas, por ejemplo, al incluir WordWrapped, cortar y pegar contenido a menudo insertará un salto de línea después del contenido pegado.
3. A menos que haga que se muestre div: en línea, en cuyo caso todavía puede perder el enfoque como en 1, pero aparentemente solo si lleva el cursor del texto hasta el final. No considero este uso "normal" del elemento sin embargo.
4. Firefox 21 w / header: al seleccionar parte del contenido, luego cortar y pegar, de manera similar a 1, dividirá el elemento del título a la mitad en ese punto e insertará un tercer elemento del título entre las dos mitades. Al menos, tendrá contenido pegado en su interior, pero ahora tiene tres elementos de encabezado donde originalmente había uno.
5. Chrome 27 w / header: seleccione algún contenido y córtelo y péguelo. La página se bloquea. Obtienes un "¡Aw snap!" mensaje. Eso es.
Un jsFiddle según lo solicitado.
Aquí hay un enlace a un jsFiddle para reproducir lo anterior. Es bastante simple, aunque en este momento lo único que no se está reproduciendo es el error de pérdida de enfoque. Es bastante simple:
<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
En mi opinión, yo diría que div es la apuesta más segura en todos los ámbitos. Cualquier elemento que desees editar de verdad (ya sea un tramo, un encabezado, etc.), puedes colocarlo dentro del div y editar como si fuera solo ese elemento. Además, para tener en cuenta la pantalla: problema en línea que mencionaste, siempre puedes usar float: left o float: right en tu div editable para darle una sensación de "inline" sin que realmente esté en línea.
¡Espero que ayude!