javascript - Calculating xy-position of text selection - Stack Overflow

admin管理员组

文章数量:1302272

I am trying to create my own text selection with DOM-elements. Yes, I mean the blue background you see behind the text when you select it in this element. The idea is to halt the default behavior (the blue color) and use my own elements to do the job by finding the xy-position of the selection and then placing absolute positioned elements. I want to be able to do this with a regular div.

I'm thinking I need 3 elements. One for the top row (which may be inplete), one for the middle chunk, one for the last (same as top). Here's an image that helps you understand:

I've been thinking of catching mouseup/down and then mousemove and then check window.getSelection() but so far I'm having trouble getting anywhere.

Using the CSS ::selection will not work because the element will not have focus.

I appreciate all help I can get! Thanks in advance.

Edit: Stumbled upon / which might be of help? Anyone with experience with this plugin?

Edit2: Cross-browser support is required.

I am trying to create my own text selection with DOM-elements. Yes, I mean the blue background you see behind the text when you select it in this element. The idea is to halt the default behavior (the blue color) and use my own elements to do the job by finding the xy-position of the selection and then placing absolute positioned elements. I want to be able to do this with a regular div.

I'm thinking I need 3 elements. One for the top row (which may be inplete), one for the middle chunk, one for the last (same as top). Here's an image that helps you understand:

I've been thinking of catching mouseup/down and then mousemove and then check window.getSelection() but so far I'm having trouble getting anywhere.

Using the CSS ::selection will not work because the element will not have focus.

I appreciate all help I can get! Thanks in advance.

Edit: Stumbled upon https://code.google./p/rangy/ which might be of help? Anyone with experience with this plugin?

Edit2: Cross-browser support is required.

• javascript
• html
• textselection

Share Follow edited Jul 10, 2013 at 13:40 Firas Dib asked Jul 10, 2013 at 8:54 Firas DibFiras Dib 2,62111 gold badge2020 silver badges4040 bronze badges 6

• I'm not sure you can prevent the text highlight without disabling functionality. `user-select' lets your prevent an area from being selectable but that means you wont' be able to cut and paste. The other concern is performance. Using javascript to render the highlight will be much slower than letter the browser/os do it natively. – Isaac Suttell Commented Jul 10, 2013 at 9:38
• @IsaacSuttell: Can't you catch onselect and prevent the default action? I would think so. But that would probably kill the window.getSelection() feature as well. I don't think there will be a massive performance hit, its just three elements. Codemirror seems to handle it pretty well, but I have no clue how. – Firas Dib Commented Jul 10, 2013 at 11:06
• I believe onselect is limited to form tags. – Isaac Suttell Commented Jul 10, 2013 at 15:22
• @IsaacSuttell: yeah, read that too. damn. Check this out if you feel like lending a helping hand: jsfiddle/XjHtG/9 – Firas Dib Commented Jul 10, 2013 at 15:23
• If you prevent the default behavior users won't be able to copy text, is that what you want? – Petah Commented Jul 11, 2013 at 15:17

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 11

You can use getClientRects:

var element = document.getElementById('element')

element.onmouseup = function(){
    var selection   = document.getSelection(),
        range       = selection.getRangeAt(0),
        clientRects = range.getClientRects()
    
    console.log(clientRects)
}

http://jsfiddle/XjHtG/

This will return the left, right, top, bottom, width and height of all selections made.

本文标签： javascriptCalculating xyposition of text selectionStack Overflow