Можно ли определить, где в тексте ap произошло событие щелчка мышью? - PullRequest
Новая
       7

Можно ли определить, где в тексте ap произошло событие щелчка мышью?

7 голосов
/ 02 сентября 2010

У меня есть <p> содержащий текст. Когда нажимается <p>, я создаю <textarea>, содержащий текст из <p>. Можно ли вычислить , где в тексте <p>, когда произошел щелчок, и переместить курсор <textarea> в ту же точку?

Ответы [ 3 ]

2 голосов
/ 02 сентября 2010

Надеюсь, этот простой пример поможет: 

<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 - см. этот пример .

2 голосов
/ 02 сентября 2010

Не верю, нет. DOM просто знает, какой содержащий элемент получил событие click, он не различает фрагменты текста внутри содержащего элемента, если они сами не являются элементами. И я сомневаюсь, что вы хотите обернуть каждый символ в вашем тексте собственным тегом элемента:)

0 голосов
/ 02 сентября 2010

Полагаю, что для того, чтобы понять все правильно, потребуется немало усилий, и вы не сможете сделать это совершенно правильно. Но вы, вероятно, захотите использовать event.clientX и event.clientY.

РЕДАКТИРОВАТЬ - не знал об этом материале, когда я ответил. Выглядит вполне возможно, чтобы получить его правильно. http://www.quirksmode.org/dom/range_intro.html

Альтернативная идея: стилизуйте текстовую область так, чтобы она выглядела как обычный текст, и измените стиль, чтобы она выглядела как поле формы при нажатии.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...