如何使用 jQuery 在 contenteditable div 中移动插入符号？答案

【问题标题】：How to move the carret in a contenteditable div using jQuery?如何使用 jQuery 在 contenteditable div 中移动插入符号？
【发布时间】：2014-01-29 17:11:36
【问题描述】：

我正在尝试将插入符号放置在内容可编辑的 div 中。 div 没有 setSelectionRange 或 createTextRange。（我目前正在使用 Chrome。）

所以我测试了是否可以发送按键事件：

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

它不起作用。该事件未显示在 myDiv 上的处理程序中。

有什么建议吗？

【问题讨论】：

标签： javascript jquery events dom

【解决方案1】：

由于问题的编辑与您最初提出的问题完全不同，请查看：

How to move cursor to end of contenteditable entity

【讨论】：

啊，很好。我错过了该示例使用 createRange，而不是 createTextRange。（对不起，如果我的问题不清楚，但我认为我没有改变问题本身。）
或者，再次阅读问题，我明白你的意思了。 ;-) “更改 div 内的插入符号位置”会更好......

【解决方案2】：

在触发之前绑定处理程序时应该会显示该事件：

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

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

这会在您访问页面时在控制台中记录39。

working fiddle

【讨论】：

谢谢 Alex，我只是在日志中错过了它。
我不确定这是否有效（就在 div 中定位插入符号而言）jsfiddle.net/chim/3vB2n/3