是否可以计算出在 p 的文本中发生鼠标单击事件的位置？答案

【问题标题】：Is it possible to work out where in a p's text a mouse click event occurred?是否可以计算出在 p 的文本中发生鼠标单击事件的位置？
【发布时间】：2010-09-02 14:51:19
【问题描述】：

我有一个包含文本的<p>。单击<p> 时，我会创建一个<textarea>，其中包含来自<p> 的文本。是否可以在<p> 的文本中计算在哪里点击发生，并将<textarea> 的光标移动到同一点？

【问题讨论】：

标签： javascript jquery html textarea mouseevent

【解决方案1】：

我不相信，不。 DOM 只知道哪个包含元素收到了点击事件，它不区分包含元素中的文本片段，除非它们本身就是元素。而且我怀疑你想用自己的元素标签来包装文本中的每个字符:)

【讨论】：

@Yeti 的回答似乎与您所说的相矛盾，大卫。这也是我不知道的。
@morgancodes：我当然希望 Yeti 的解决方案有效。我必须保留它，以防我遇到同样的事情:)

【解决方案2】：

希望这个简单的例子有所帮助：

<html>
<head/>

<body>
<script type='text/javascript'>

function getPosition() 
{   
        var currentRange=window.getSelection().getRangeAt(0);   
        return currentRange.endOffset;
}

function setPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

function test()
{
    setPosition('testId', getPosition());
}


</script>
<p onclick = 'test()'>1234567890</p>
<textarea  id='testId'>123467890</textarea>
</body>
</html>

或者您可以使用第三方 JS 库，例如 jQuery - 请参阅 this example。

【讨论】：

@jpalecek 塞维利亚的理发师使用 jQuery？
@peter @jpalecek 那个人物。我们现在可以停止了吗？
感谢您的回答！我真的希望这行得通；希望有机会在接下来的几天内尝试。

【解决方案3】：

我猜这需要相当多的摆弄才能做到正确，而您将无法完全正确。但您可能会想要使用 event.clientX 和 event.clientY。

编辑——我回复时不知道这些东西。看起来很可能让它完全正确。 http://www.quirksmode.org/dom/range_intro.html

另一种想法：设置 textarea 的样式，使其看起来像纯文本，然后重新设置样式，使其在被点击时看起来像一个表单域。

【讨论】：

ooo，我喜欢这个另类的想法。在未来的开发中，我可能不得不修补它。
不错的想法 re：textarea 样式。这也是我想到的最好的事情，但我仍然看到一些缺点，例如。当<textarea> 中输入了多个段落时，可能需要稍后将其拆分为单独的<textarea>s。看来我会在某一方面做出妥协。