Javascript 选定的文本和xy坐标_Javascript_Coordinates_Selectedtext

Javascript 选定的文本和xy坐标

javascript

Javascript 选定的文本和xy坐标,javascript,coordinates,selectedtext,Javascript,Coordinates,Selectedtext,如何同时获取选定文本和单词的xy坐标？？？只需谷歌搜索即可： var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { // FireFox txt = document.getSelection(); } else if (document.selection) { // IE 6/7 txt =

如何同时获取选定文本和单词的xy坐标？？？

只需谷歌搜索即可：

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坐标。因为它依赖于它的容器位置和大小、文本字体、文本布局和许多其他变量。

我正在为一个项目使用这个jQuery插件，它似乎工作得非常完美。您可以使用jQuery获取鼠标的位置

下面是我编写的一些示例代码

<!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>


$（函数（）{
$（'select'）.bind（'textselect click'，函数（e）{
console.log（e.text）；
console.log（e.pageX）；
})
});
这是一个简单的选择测试

您可以试试这样的方法

<!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>


$（函数（）{
$（'select'）.bind（'textselect click'，函数（e）{
console.log（e.text）；
console.log（e.pageX）；
所选变量_text=e.text
var original_text=$（this）.text（）；
var parts=原始文本。替换（例如，文本“/”）。拆分（“/”）；
（i部分）{
console.log（第[i]部分）
}
})
});
这是一个简单的选择测试

要展开@MatuDuke的答案，您可以获得所选文本的位置，如下所示：

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

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

这些将为您提供相对于视口的像素值。但是，它似乎在文本区域内不起作用，这是我目前试图解决的问题。

你能给我一个没有jquery的例子吗？除了在IE中，它不会获得所选文本。在其他浏览器中，它返回一个

选择对象，你可以在该对象上调用toString（）
来获得所选文本。您还没有回答问题的另一个更难的部分。感谢您的更正，我只是没有测试代码，因为它非常琐碎。关于问题的较难部分，我没有答案…：（我以前在这里见过这样做：所以这不是一个问题，如果这是一个如何的问题。我想看到这个答案。事实上，刚刚发现他们在鼠标点击事件被触发时得到了鼠标的clientX。聪明的黑客。对于更难的问题，请看你能澄清你的问题吗？哪个词？如果你选择了一个典范怎么办ph？在这种情况下，您想要什么（X，Y）？选择的开始？选择的结束，鼠标点击的位置？然后只使用.pageX和.pageY。否则，请参见。这对我来说很有效，只是方法是range.getBoundingClientRect（）