<monkey-write> Web Component

• Source on github.
• Package on NPM

Default usage example

The default setting only allows us to write the text provided, ignoring all other keystrokes.

The text is inserted with a <template> in the default slot. White-space formatting is maintained inside the template.

<monkey-write>
  <template>A monkey hitting keys at random for an infinite amount of time will eventually want some help writing Hamlet (or whatever). You're the monkey. We're here to help.</template>
</monkey-write>

We can provide an accessible label for the <textarea>, with slot="label" content:

<monkey-write>
  <span slot="label">Only write what we let you</span>
  <template>A monkey hitting keys at random for an infinite amount of time will eventually want some help writing Hamlet (or whatever). You're the monkey. We're here to help.</template>
</monkey-write>

Or we can use the data-label attribute to provide a hidden aria-label for the <textarea> instead:

<monkey-write data-label="only write what we let you">
  <template>A monkey hitting keys at random for an infinite amount of time will eventually want some help writing Hamlet (or whatever). You're the monkey. We're here to help.</template>
</monkey-write>

Typing help and hints

To make things a bit easier, by default:

• Capitalization is ignored
• The space bar can be used for any whitespace or punctuation
• A hint is provided after 15 failed keystrokes

The following attributes allow us to change how much help is provided, and when/if the hint should appear.

The data-hint attribute

Set data-hint="<number>" to change when hints appear, based on the number of missed keystrokes. This example uses data-hint="5" for more immediate hints:

Or set data-hint="false" to turn off hints entirely:

The data-cheat attribute

As described above, the default cheat mode provides some help, while still making us type the entire text:

• Capitalization is ignored
• The space bar can be used for any whitespace or punctuation

We can adjust these settings with the data-cheat attribute. Set data-cheat="true" so that evert keystroke will input the next required character:

Or go even farther with data-cheat="hyper" to enter a random number of correct characters (between 4 and 24) on each keystroke:

We can also set data-cheat="false" to turn off any key-correction, and require typing the exact text provided: