Editable regions in HTML

Any element can become a text field, which is powerful and rarely what you want.

<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>

How it works

contenteditable makes the element and its children editable.
plaintext-only keeps pasted formatting out.
spellcheck and autocapitalize apply here as they do to inputs.

The run, in numbers

Lines: 12
Characters to type: 403
Tokens: 83
Three-star pace: 80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 62 seconds.

Type this snippet

Step 1 of 2 in Direct manipulation, step 8 of 13 in Interactive HTML.

← Previous Next →