Question

我有一个段落，在选择任何文本时，我想在所选文本的顶部突出显示我的div。为此我制作了隐藏的div并提供相对于我的容器段的绝对位置。现在我需要所选文本的坐标，这样我就可以给左边的位置和顶部的div在所选文本上突出显示。

我正在使用一个脚本，无论我选择什么，都会给我提醒，我应该在此实现什么，以便我的隐藏div可以定位，因为它是使用脚本阻止。

    <body>
<div id="smll_pop"></div><!-- this will gonna positioned on body -->
    <h2>Select some text on the page ...</h2>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <p>Lorem ipsum dolor sit amet, consectetur</p>

    <script type="text/javascript"> 
        if(!window.SS){
            SS = {};
        }       
        SS.Selector = {};

        SS.Selector.getSelected = function(){
            var t = '';
            if(window.getSelection){
                t = window.getSelection();      
            }else if(document.getSelection){
                t = document.getSelection();

            }else if(document.selection){
                t = document.selection.createRange().text;      
            }
            return t;   
        }

        SS.Selector.mouseup = function(){
            var st = SS.Selector.getSelected();


            if(st!=''){
                alert("You selected:\n"+st);
                document.getElementById("smll_pop").style.display="block";  
            }

        }

        $(document).ready(function(){
            $(document).bind("mouseup", SS.Selector.mouseup);
        });

    </script>
    </body>

Answer 1

借助stackoverflow和我的逻辑，我实现了解决方案。和我在这里分享的代码。

    function getSelectionCoords() {
                var sel = document.selection, range;
                var x = 0, y = 0;
                if (sel) {
                    if (sel.type != "Control") {
                        range = sel.createRange();
                        range.collapse(true);
                        x = range.boundingLeft;
                        y = range.boundingTop;

                        document.getElementById("smll_pop").style.top="y";
                        document.getElementById("smll_pop").style.left="x";
                        alert(x+" "+y);
                        alert(typeOf(x));
                    }
                }
                else if (window.getSelection) {
                    sel = window.getSelection();
                    if (sel.rangeCount) {
                        range = sel.getRangeAt(0).cloneRange();
                        if (range.getClientRects) {
                            range.collapse(true);
                            var rect = range.getClientRects()[0];
                            x = rect.left;
                            y = rect.top;

                     document.getElementById("smll_pop").style.top=y-44+"px";
                     document.getElementById("smll_pop").style.left=x-20+"px";
                        alert(x+" "+y); <!-- will show coordinates -->
                        alert(typeof(x)); <!-- will show type as number -->
                        }
                    }
                }
            }

如何获取我正在选择的文本的坐标 - 使用javascript

1 个答案: