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

Posted 2023-05-09

【中文标题】如何使用 jQuery 在 contenteditable div 中移动插入符号？

【英文标题】：How to move the carret in a contenteditable div using jQuery?

【发布时间】：2014-01-29 17:11:36

【问题描述】：

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

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

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

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

有什么建议吗？

【参考方案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