Butter Side Up Start a project
← The Test Kitchen

Alphabet Soup

Served

A chef who climbs onto whichever text box you click, sets a soup pot on its edge, and steals the first of every letter and number you type. Once all 36 are in the pot, he packs up and leaves for good.

Try it

Click a box and start typing.

Want your letters back? Click the pot.

Things to try

  1. 01Type the same letter twice. He only wants the first one.
  2. 02Keep going. About one theft in ten, he eats it instead, so that letter goes back on his list.
  3. 03Click his pot. Everything spills back into the box, still steaming, and he starts over.
  4. 04Delete a letter before he grabs it. He'll let you know how he feels.
  5. 05Try the email box or the secret recipe. Both are off-limits.
  6. 06Collect all 36 and he leaves. Hire a new chef to start again.

Add it to your site

One line. No dependencies, no build step.

<script src="https://cdn.jsdelivr.net/gh/buttersideupdev/alphabet-soup@2/alphabet-soup.js"></script>

Works on

Text areas, and text, search, URL and phone boxes.

Never touches

Password, email and number boxes, read-only or disabled boxes, and anything marked data-alphabet-soup="off".

OptionWhat it does
data-size="0.7" on the script tagChef size for the whole page. The default, auto, sizes him to the box's text.
data-alphabet-soup-size="1.4" on a boxChef size on that one box.
data-alphabet-soup="off" on a boxKeeps the chef away from it.
AlphabetSoup.setSize(0.7)Changes the size while the page is open.
AlphabetSoup.reset()Hires a new chef with an empty pot, even after the last one left.

Code and docs on GitHub ↗ Free to use under the MIT license.

What's really going on

Nobody needs this. It's built properly anyway.

  • Sealed off

    He's drawn inside his own shadow DOM, so the page's styles can't bend him and his can't leak onto the page.

  • Framework-friendly

    Every theft changes the box the way the browser does and fires a normal input event, so React, Vue and friends stay in sync.

  • Pixel-accurate

    To find exactly where a character sits, padding, scrolling and wrapping included, he measures an invisible copy of the box.

  • Keeps up with you

    Each edit is compared with the last, so if you type, paste or delete mid-reach, he still grabs the right character.

  • One thing at a time

    Arriving, stealing, snacking and leaving run in order through a small queue that speeds up when there's a backlog.

  • Polite

    Screen readers hear every theft, "reduce motion" is respected, and nothing animates while he's idle.

Same skills, less theft: autocomplete, booking widgets, embeddable tools.