Question

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

Answer 1

我不相信，不。 DOM只知道包含元素接收click事件的内容，它不区分包含元素中的文本片段，除非它们是元素本身。我怀疑你想用自己的元素标签包装文本中的每个字符：）

Answer 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。

Answer 3

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

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

一个交替的想法：设置textarea样式，使其看起来像纯文本，并在点击时将其重新设计为表单字段。

是否有可能找出p文本中鼠标点击事件发生的位置？

3 个答案: