Claus Witt dot com

webdeveloper

Recently I had to implement a feature - running in chrome, safari and firefox - that enabled users to click in a text to split the text into two paragraphs. At first the solution eluded me, however a morning while entertaining my son before going on road trip to my wires parents house, a possible solution popped into my head. Fortunately my son let me try it - and it worked!

The whole trick is to let the click event call a method that uses document.caretRangeFromPoint() (for WebKit browsers) and document.createRange() for Firefox to create a range from the clicked point, and then using the start of that range - range.startOffset as the point in the text to split. All text before the point is kept in the current paragraph, all text after the point is used for the newly created paragraph after the clicked one.

I have created a quick and dirty demo - only working (tested) in (the latest versions of) Safari, Chrome and Firefox.

blog comments powered by Disqus