4

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 incomplete), one for the middle chunk, one for the last (same as top). Here's an image that helps you understand: Image showing the needed selection elements

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.com/p/rangy/ which might be of help? Anyone with experience with this plugin?

Edit2: Cross-browser support is required.

Firas Dib
  • 2,743
  • 19
  • 38
  • I'm not sure you can prevent the text highlight without disabling functionality. [`user-select'](https://developer.mozilla.org/en-US/docs/Web/CSS/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 Jul 10 '13 at 09: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 Jul 10 '13 at 11:06
  • I believe [`onselect` is limited to form tags](http://www.w3schools.com/jsref/event_onselect.asp). – Isaac Suttell Jul 10 '13 at 15:22
  • @IsaacSuttell: yeah, read that too. damn. Check this out if you feel like lending a helping hand: http://jsfiddle.net/XjHtG/9 – Firas Dib Jul 10 '13 at 15:23
  • If you prevent the default behavior users won't be able to copy text, is that what you want? – Petah Jul 11 '13 at 15:17
  • @Petah: In this case it would not matter, but I have put the thing on hold for now. – Firas Dib Jul 11 '13 at 21:05

1 Answers1

10

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.net/XjHtG/

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

Dee
  • 7,455
  • 6
  • 36
  • 70
Mircea
  • 11,373
  • 26
  • 64
  • 95
  • Cool! Any idea how one could halt the default behavior? Any IE support possible? – Firas Dib Jul 10 '13 at 13:38
  • 1
    You can use event.preventDefault but then there will be no selection to get X/Y. Just hide it with ::selection http://jsfiddle.net/XjHtG/2/ – Mircea Jul 10 '13 at 14:09
  • 1
    I think I am on the right track. A few kinks to work out though, IE-suupport being one of them. Heres what I have so far: http://jsfiddle.net/XjHtG/7/. My method (described by the picture) kind of works, except when you select say from anywhere till `I'm` (far right, third row from bottom). Also not quite sure how to support selection made with the keyboard. – Firas Dib Jul 10 '13 at 14:33
  • 1
    Did some more work on it to support the keyboard. Partially works: http://jsfiddle.net/XjHtG/9/ – Firas Dib Jul 10 '13 at 15:09
  • 1
    OK, so what seems to be the exact problem? For other problems you should probably open a new specific question. – Mircea Jul 10 '13 at 16:40
  • Selection with the keyboard is not accurate – Firas Dib Jul 10 '13 at 20:55
  • Not sure what are you trying to do but this may help: http://jsfiddle.net/e7TSz/. Changed onkeydown to onkeyup – Mircea Jul 10 '13 at 21:06
  • I'm trying to mimc the default highlighting feature :). Yes, keyup helped. Couple that with keydown and it actually seems to work pretty well. Only problem now is actually printing out the correct boxes. Try for example to end any selection on the same line as `I'm`, but beyond that word, and you'll see it break. Not sure how I should handle that. EDIT: It seems as if it is always one character behind when you highlight and move with the keyboard.. weird. – Firas Dib Jul 10 '13 at 21:18
  • Are you kidding me? This is so cool. It's literally exactly what I was looking for.... up-votes all around. – jscul Feb 08 '18 at 10:40