How to reset a div w Contenteditable after blur / focusOut

Question

please see the following:

http://jsfiddle.net/8sq2w/

Problem:

1. Focus in the item
2. Highlight the text and move the cursor all the way to the right
3. Focus out of the item
4. Note how the item is now stuck at the end, broken

Problem:

How can you reset on blur so you see the front of the div content?

Desired after focus:

Thanks

Answer 1

You can just restore the window position on the JavaScript onblur event.

For example:

<div contenteditable="true" class="listItem" onblur="window.scroll(0,0)">This is a really big field...</div>

Or if you don't want to scroll the window, use event.target:

<div contenteditable="true" onblur="event.target.scroll(0,0)"></div>