Regiones editables en HTML

Cualquier elemento puede volverse un campo de texto: potente y rara vez lo que quieres.

<div class="note" contenteditable="plaintext-only" role="textbox"
     aria-label="Scratch note" spellcheck="true">
  Type anything here.
</div>

<p>Names are <span contenteditable="false">fixed</span> inside an
   editable paragraph.</p>

<div contenteditable="true" autocapitalize="sentences"
     role="textbox" aria-multiline="true" aria-label="Rich note">
  <p>This one keeps <strong>formatting</strong>.</p>
</div>

Cómo funciona

1. contenteditable vuelve editable el elemento y a sus hijos.
2. plaintext-only deja afuera el formato pegado.
3. spellcheck y autocapitalize aplican aquí igual que en los inputs.

El intento, en números

Líneas

12

Caracteres a escribir

403

Tokens

83

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 62 segundos.

Escribe este fragmento

Paso 1 de 2 en Manipulación directa; paso 8 de 13 en HTML interactivo.

← Anterior Siguiente →