This one comes with a few caveats:
1) Might not be great for browsers other than most advanced ones (I did all testing in latest Google Chrome);
2) On mobile Safari, the character counter doesn’t work;
3) There is a bug if you mess around too much with selecting/deselecting/pasting text into the box area containing the hyphenated headline.
I suspect many of these problems are fixable by using jQuery. I like playing with pure JS as I get to know the language (and get to know programming).
I’ve dropped some notes into the main.js file on what I learned making this better, but here they are for easier access:
# using .focus() to compare to document.activeElement (but I ended up not using it)
# regular expression help — especially the use of those handy brackets — from Reid
* his example: http://jsfiddle.net/vsjmm2us/
# really cool stuff about attaching events, and trying to call functions with arguments with an event attachment
# contentEditable is fun (but didn’t use it)
* but apparently also terrible: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480
Older parts of this post below:
For example, “Special report: The cow eats grass, barley on the Goddess Moon,” will be turned into special-report-the-cow-eats-grass-barley-on-the-goddess-moon.
I’m still working on refining the .js and improving its ability to accommodate the different ways people might input the original text. I made this to help out when I need to alter a headline and URL in Plone, the CMS I use for my job, as it lacked WordPress’s ability to automatically handle this.