Turn your sentence into a hyphenated string: hyphenator.hellotumo.com.
Some caveats:
- Might not be great for browsers other than most advanced ones (I did all testing in latest Google Chrome);
- On mobile Safari, the character counter doesn’t work;
- 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, but I like playing with pure JS as I get to know the language.
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):
- https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus
# regular expression help — especially the use of those handy brackets — from a friend, Reid:
- his example: http://jsfiddle.net/vsjmm2us/
- more on regex: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
# really cool stuff about attaching events, and trying to call functions with arguments with an event attachment:
- 2 elegant ways to do so: http://toddmotto.com/avoiding-anonymous-javascript-functions/
- found it via http://stackoverflow.com/questions/10335343/javascript-attaching-events
# wonderful, simply way, using onkeyup, to make a live counter for number of characters. onkeyup was the trick, I believe. (I was using onkeydown and onkeypress.) Sample uses jQuery but I used straight JavaScript:
- http://jsfiddle.net/hNn5b/
- http://stackoverflow.com/questions/9767521/count-and-display-number-of-characters-in-a-textbox-using-javascript
# contentEditable is fun (but didn’t use it):
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.contentEditable
- but apparently also terrible: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480
Acknowledgments: Thanks, Reid S.