Question

假设我有一个div，其中包含如下所列的句子：

<div class="sentence">This is a sentence</div>

我正在尝试创建一个函数/事件处理程序，用于识别用户何时单击<div>内的文本。但是，当他们点击<div>内部时，该功能需要确切知道他们点击的位置，以便我可以在该位置插入<span>。例如，如果用户点击字母“＆n;”之间。并且＆＃39; t＆＃39;在单词＆＃39;句子＆＃39;中，我想在那里插入一个<span>，所以我最终得到了

<div class="sentence">This is a sen<span>test</span>tence</div>

这样的事情：

$('.sentence').on('click', function (e) {
    var to_insert = '<span>test</span>';
    // determine exactly where inside the div I clicked
    // insert 'to_insert' at that location
});

有什么想法吗？

Answer 1

您可以使用window.getSelection().anchorOffset

获取字符串中的点击位置

JS

$('.sentence').on('click', function (e) {
    var to_insert = 'test';
    var anchorOffset = window.getSelection().anchorOffset;
    var resultHtml = $(this).html().substring(0, anchorOffset) + to_insert + $(this).html().substring(anchorOffset);
    $(this).html(resultHtml);
});

DEMO

如何在用户在div中单击的位置插入div？

1 个答案: