This is a bug in google chrome and safari. In firefox it's working properly. I spend a while figuring out how to fix it.
My solution is, that you need to wrap contenteditable to another wrapper. So caret will be at the end of the inner contenteditable.
<div id="body">
<div id="editable" contenteditable="true">
<span> </span>
</div>
</div>
We need to have   inside so we can focus the inner content.
Firstly, check whether the browser is Chrome or Safari, if so add styling.
is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
if(is_chrome && is_safari) is_safari = false;
if(is_chrome || is_safari){
var element = document.getElementById('element');
element.style.display = 'inline-block';
element.style.width = 'auto';
}
Then all you need to do is, focus contenteditable and set caret at the end of text.
contentFocus = function(){
setTimeout(function(){
document.getElementById('editable').focus();
}, 100);
}
here i edited your example http://jsfiddle.net/6XAfv/4/ it's not working perfectly, but you can get it to work easy with focus fixes.
Hope this helps.