使用JavaScript/JQuery根据点击位置更改HTML

Question

使用JavaScript/JQuery根据点击位置更改HTML

javascriptjqueryclickdom-manipulationcss-position

7

在一个HTML页面中，你可能会看到像这样的两个段落的代码：

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

非常简单，这两个标签将呈现如下：

第一段

第二段

我感兴趣的是允许用户在渲染的HTML代码中的某个位置单击，以便使用JQuery插入新元素。例如，如果我在第一段中找到的单词f*ir*st的字母i和r之间单击（仅单击，不是高亮/选择），我将能够在HTML代码中的该位置精确地插入自定义的span元素或任何我喜欢的元素，从而导致类似于以下内容：

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

你有什么可以帮助我的想法吗？我的请求不包括绝对定位，因为那不能解决我的问题。

- prince

2

你说的点击 i 和 r 是什么意思？是指在它们之间点击还是选中它们？ - Loktar

HTML 中每个字母都有一个单独的 span 元素是否重要？那样会让事情变得更容易。 - pimvdb

我的意思是在i和r之间点击。没有选择，只是一个点击。为每个字母单独创建一个span是不可行的。 - prince

3个回答

2

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

- gion_13

你提供的解决方案非常好！然而，它目前仅使用x位置工作，如果一个段落行跨越两行并且在第二行点击，插入span标签将发生在第一行而不是第二行。 - prince

我知道这个方案存在缺陷，但它已经适应了你当前的HTML上下文。 - gion_13

1

这可以通过相当复杂的脚本来完成。

我可以提供一个你可以尝试的算法。

1.使用JQuery的API offset() http://api.jquery.com/offset/，你可以获取偏移量和元素。

2.现在你需要获取元素的innerHTML，将其作为字符串，从偏移量Y值处分割字符串。将元素分成两个元素。

3.现在你可以直接使用createElement(tagname)创建一个元素，并设置innerHTML，然后将其插入到两个元素之间。

- Kris

3

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pimvdb · Accepted Answer

这段代码虽然有点凌乱，但是使用了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();
});