根据我使用 javascript/JQuery 单击的位置更改 HTML答案

【问题标题】：Changing HTML depending on where I click with javascript/JQuery根据我使用 javascript/JQuery 单击的位置更改 HTML
【发布时间】：2011-11-06 18:32:46
【问题描述】：

在一个 html 页面中，您可能有一些包含两个段落的代码，如下所示：

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

很简单，这两个标签会呈现如下：

第一段

第二段

我感兴趣的是允许用户单击呈现的 html 代码中的某个位置，以便使用 JQuery 插入一个新元素。例如，如果我在第一段中找到的单词 f*ir*st 中的字母 i 和字母 r 之间单击（只是单击，没有突出显示/选择），我将能够插入一个自定义的 span 元素或我喜欢的任何东西在 HTML 代码中的那个位置，结果是这样的：

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

有什么可以帮助我的想法吗？我的要求不包括绝对定位。那不会解决我的问题。

【问题讨论】：

点击i 和 r是什么意思，你的意思是点击之间，还是高亮显示？
HTML 是否为每个字母包含一个单独的跨度是否重要？这会让事情变得更容易。
我的意思是在 i 和 r 之间单击。无需选择，只需单击即可。每个字母单独的跨度是不可行的。

标签： javascript jquery click dom-manipulation css-position

【解决方案1】：

这很脏但利用了contenteditable:http://jsfiddle.net/Jj9Mp/。

$('div').click(function(e) {
    $('div').attr('contenteditable', true);
    document.execCommand("InsertHTML", false, "<span class=red>!</span>")
    e.stopPropagation();
});

$(':not(div)').click(function(e) {
    if($(this).parents('div').length === 0) {
        $('div').attr('contenteditable', false);
    } else {
        $('div').click();
    }
    e.stopPropagation();
});

【讨论】：

+1 不错！但是，不幸的是，它有点错误。您通常可以删除大部分文本甚至替换字母:(
@gion_13：它不适用于选择；在这种情况下，它将覆盖文本。但正如我所说，这也不是一个很好的解决方案。
问题是我想延迟插入。例如我现在先在 i 和 r 之间单击，但稍后我会在其中插入一个跨度...
@prince：所以你想保存光标位置并在以后使用那个位置？
@pimvdb：是的，不是马上。基本上，用户稍后会突出显示一些文本，我将使用该突出显示的文本在记录的位置创建一个内部链接，将我带到突出显示的文本。

【解决方案2】：

这是我的解决方案：http://jsfiddle.net/gion_13/L6aeT/
它通过计算字符串的实际大小（以 px 为单位）来工作。

【讨论】：

您提供的解决方案很棒！但是，它目前仅使用 x 位置工作，如果段落行延伸超过两行并且在第二行中进行了单击，则 span 标签的插入将发生在第一行而不是第二行。
我知道这些缺陷，但该解决方案已针对您当前的 html 上下文进行了调整。

【解决方案3】：

这可以通过稍微复杂的脚本来完成。

我可以说明一个你可以尝试的算法。

1.JQuery 有一个 API offset() http://api.jquery.com/offset/ 使用它可以获取偏移量和元素。

2.现在你需要取元素的innerHTML，把它当作字符串，从偏移Y val 开始，在字符串中的位置Y 处分割。将元素作为两个元素。

3.现在你可以直接在脚本中使用creteElement(tagname)创建一个Element，并设置innerHTML，然后插入到两个元素之间

【讨论】：

.offset() 方法返回像素坐标，而不是字符偏移量。