改变HTML取决于我在哪里点击javascript/JQuery

Changing HTML depending on where I click with javascript/JQuery

本文关键字：javascript JQuery 在哪里 HTML 取决于 改变      更新时间：2023-09-26

在一个html页面中，你可能有一些像这样的两段代码:

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

，很简单，这两个标签会像这样呈现:

第一段

第二段

我感兴趣的是允许用户单击渲染的html代码中的某个地方，以便用JQuery插入一个新元素。例如，如果我在第一段中的单词f*或*st中单击字母I和字母r之间(只需单击，不突出显示/选择)，我将能够在HTML代码中的该位置插入自定义span元素或任何我喜欢的东西，结果如下:

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />
有什么可以帮助我的主意吗?我的要求不包括绝对定位。这解决不了我的问题。

这是肮脏的，但利用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();
});

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

这可以通过一些复杂的脚本来完成。

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

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

2。现在您需要获取元素的innerHTML，将其作为字符串，从偏移Y值中获取，在字符串中的Y位置分割。将元素设置为两个元素

3。现在您可以使用creteElement(tagname)在脚本中直接创建一个Element，并设置innerHTML，然后将其插入到

两个元素之间。
相关文章：