Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Automatically Select-All When Clicking On A Content Editable Element

Overview

I'm working on a tool to make ascii art. One feature I'm after is the ability to auto select a character when I click on it. This is the code I'm using for that.

Example HTML

Here's the example along with the HTML that makes it

Draw the chart
Fasten two pins

The Script

And this is the function that makes things happen:

Notes

  • If you click on the _Draw the chart__ or _Fasten two pins__ lines in the Example section you'll see the behavior

  • I tested this on a mac in safari, firefox, and chrome

  • The main thing is the _focusOnClick__ handler. I'm attaching them through the _init__ function. Other methods would work just as well

References