14

Update

I recently discovered you can programatically create selections with Chrome which aren't continuous, by either replacing elements / textnodes inbetween in the parts you want unselected or hiding and then showing them.

Example of non-continuous selections for Chrome: http://jsfiddle.net/niklasvh/YKJBW/

var t = $('div').contents().get(0);


$.each(t.nodeValue.split(" "),function(i,e){
   t = t.splitText(e.length);
     if (t.length>0){
     t = t.splitText(1);
     }
});



var c = $('div').contents();

$.each(c,function(i,e){    
    if (i>0){
    if (i%3) { }else{
             e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);                           
    }    
}   
});

$('unselect').hide(); 
window.setTimeout(function(){
   $('unselect').show();     
},0);

However when performing the copy event, the whole selection does get selected (even if it has gaps in-between), but of course the same method can be used to programatically alter the selection before the copy event is performed.

The tricky part now is that can you actually make this functionality usuable by holding Ctrl down like you can in Firefox to create non-continous selections. The current method I use in the example breaks the TextNodes into many pieces, which for visual purposes does no difference. It however, also uses additional tags to break the selection, which as far as I've discovered, cannot be removed. However, the same functionality can be reached by deleting TextNodes and adding new ones in place for them. The problem is that it will only take into account the last node added, so if you have multiple spaces in your selection, it will only take into account the last DOM change you applied.

Can anyone think of any non-document breaking ways to apply this non-continous selections which does not make any permanent changes to the selection and its elements?

The original question

Is it possible to make selections which are non continous in Google Chrome? For example if you have an element with text like this:

<div>this is some random text</div>

Is it possible to make a selection which contains for example this is and text making the text in-between unselected?

This seems to work fine in FF, where you can addRanges which aren't next to each other, and the selection is made accordingly.

For IE, there doesn't seem to be anything that would allow you to have multiple ranges, but IE's selection object has a lot of other methods that compensate for it.

With non-continous selections, you could always append or prepend a selection a certain section from a website for example when performing copy actions, or force the user to unselect certain portions of their selections, which you don't want them to copy.

Example of non-continous selection:

enter image description here

working example (working at least in FF4).

edit To perform the same type of selection manually, you can with firefox hold ctrl down and start dragging text in different positions, but performing it on chrome doesn't work.

edit 2 I guess this and this sum it up quite well. Looks like there isn't anything to be expected as far as webkit browsers are concerned.

Niklas
  • 29,752
  • 5
  • 50
  • 71
  • this is a code question, it's about JavaScript -- see above: where you can `addRanges` – Jeff Atwood Jun 14 '11 at 20:33
  • 1
    None of those examples sound useful for anything other than annoying your users. (on the plus side, now that I know how sites that do that are doing it I can work on countermeasures) – Random832 Jun 14 '11 at 20:33
  • 1
    @Random832 Some clients want to avoid certain content from being copied, and attempting to remove that content from their clipboard instead of making all the content into images for example, sound certainly like a more "user friendly" solution. As far as counter measures go, anything done on the client side can always be circumvented, it isn't a question about making it impossible, but bringing it to the users attention that they are doing something they shouldn't be doing. – Niklas Jun 14 '11 at 21:11
  • Offtopic, but interestingly Courier isn't monospaced for me in FF4 but it is in Chrome. Changing to Courier New displayed it properly aligned in FF for me. – Davy8 Jun 14 '11 at 21:19
  • You could fake the selection using CSS `background-color`. – Casey Chu Jun 14 '11 at 21:23
  • @Davy8 I had the exact opposite with those browsers, but I changed the font and both got same look now, thanks – Niklas Jun 14 '11 at 21:24
  • @Casey Hope The link is just an example, what I am looking to do actually needs the real selection. – Niklas Jun 14 '11 at 21:25

2 Answers2

5

No. Firefox is the only mainstream browser to support multiple selected ranges. I think the main use case for it was to allow selection of individual columns within tables, which is not possible otherwise.

WebKit are not planning to support multiple selected ranges any time soon, from what I can gather. IE overhauled its Range and Selection APIs for IE 9 and didn't implement it. No idea about whether Opera has any plans to support it. See this thread from the WHATWG mailing list for some information:

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Also, Firefox allows selecting a table column or a rectangle of table cells with Mouse dragging while holding down CTRL. – Aloso Apr 02 '20 at 18:54
0

No, there is no concept of multiple text span selection. The selection is associated with the caret. One caret - one selection.

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • If that's the case, how come it is working with Firefox? Surely one of the browsers is doing it incorrectly, or the results would be consistent? – Niklas Jun 14 '11 at 21:27
  • @Niklas : have no idea to be honest. Text selection contains two points anchorPos and caretPos. So if you have selection and will move caret to left/right the selection will be dropped and caretPos is used as reference point. I have no idea how multiple selections will play with that. – c-smile Jun 14 '11 at 22:36