如何使用jQuery在contenteditable div中移动carret？

Question

I am trying to position the caret in a contenteditable div. The div does not have setSelectionRange or createTextRange. (I am using Chrome at the moment.)

So I tested if I could send keypress events instead:

var e = jQuery.Event("keypress", { keyCode : 39} );
jQuery(myDiv).trigger(e);

It does not work. The event does not show up in the handler on myDiv. <= Wrong. It does show up in the listener, but the caret is not moved. (keyCode=39 is right arrow.)

Any suggestions?

Answer 1

The event should show up when you bind the handler before you trigger it:

(function($){
    $(function() {
        $('#foobar').keypress(function(event) {
            console.log(event.which);
        });

        var e = $.Event("keypress", { which : 39} );
        $('#foobar').trigger(e);
    });
})(jQuery);

this logs 39 in the console right when you visit the page.

working fiddle

Answer 2

Due to the edit of the question, which is totally different to what you first asked, check this out:

How to move cursor to end of contenteditable entity