выделенный текст и координаты xy - PullRequest
Новая
       17

выделенный текст и координаты xy

0 голосов
/ 05 ноября 2010

как получить выделенный текст и координаты xy слова одновременно ??

Ответы [ 4 ]

2 голосов
/ 05 ноября 2010

Просто погуглил: 

var txt = "";

if (window.getSelection) {
    txt = window.getSelection();
} else if (document.getSelection) {
    // FireFox 
    txt = document.getSelection();
} else if (document.selection) {
    // IE 6/7 
    txt = document.selection.createRange().text;
}

txt = txt.toString()

Нет простого способа получить координаты X / Y выделенного текста. Потому что он зависит от положения и размера контейнера, шрифта текста, расположения текста и многих других переменных.

1 голос
/ 02 декабря 2014

Чтобы развернуть ответ @ MatuDuke, вы можете получить позицию выделенного текста следующим образом: 

var txt = window.getSelection(),
    range = txt.getRangeAt(0),
    boundary = range.getBoundingClientRect();

// Available positions:
// boundary.top
// boundary.bottom
// boundary.left
// boundary.right

Это даст вам значения пикселей относительно области просмотра.Однако в текстовых областях он не работает, и сейчас я пытаюсь решить эту проблему.

0 голосов
/ 05 ноября 2010

Вы можете попробовать что-то вроде этого 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);

                var selected_text = e.text
                var original_text = $(this).text();
                var parts = original_text.replace(e.text, "/").split("/");

                for(i in parts) {
                    console.log(parts[i])
                }
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>
0 голосов
/ 05 ноября 2010

Я использую этот плагин jQuery http://plugins.jquery.com/node/7411 для проекта, и, похоже, он работает безупречно.Вы можете использовать jQuery для определения положения мыши http://docs.jquery.com/Tutorials:Mouse_Position

Вот пример кода, над которым я работал 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>
...