Skip to content Skip to sidebar Skip to footer
Home / Coordinates / Javascript / Selectedtext

Selected Text And Xy Coordinates

Post a Comment
how to get a selected text and xy coordinates of the word in the same time??

Solution 1:

Just googled it:

var txt = "";

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

txt = txt.toString()

There is no simple way to get X/Y coordinates of the selected text. Because it dependes on its container position and size, text font, text layout, and many many other variables.

Solution 2:

To expand on @MatuDuke's answer, you can get the position of the selected text like so:

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

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

These will give you pixel values relative to the viewport. However, it doesn't seem to work within text areas, a problem I'm currently trying to solve.

Solution 3:

I am using this jQuery plugin http://plugins.jquery.com/node/7411 for a project and it seems to be working flawlessly. You could use jQuery to get the position of mouse http://docs.jquery.com/Tutorials:Mouse_Position

Here is some sample code I have worked on

<!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><htmllang="en"><head><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><scripttype="text/javascript"src="jquery.textselect.js"></script><scripttype="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);
            })
        });
    </script><!-- Date: 2010-11-05 --></head><body><divid="select">
        This is a simple select test
    </div></body></html>

Solution 4:

You could try something like this

<!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><htmllang="en"><head><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><scripttype="text/javascript"src="jquery.textselect.js"></script><scripttype="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);

                var selected_text = e.textvar 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><divid="select">
        This is a simple select test
    </div></body></html>

Post a Comment for "Selected Text And Xy Coordinates"