javascript - Non-continuous selections in chrome? - Stack Overflow

admin管理员组

文章数量:1297113

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: /

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 pensate 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:

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.

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/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 pensate 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:

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.

• javascript
• google-chrome
• selection

Share Follow edited Jul 6, 2011 at 15:11 Niklas asked Jun 14, 2011 at 20:06 NiklasNiklas 30k55 gold badges5353 silver badges7474 bronze badges 7

• this is a code question, it's about JavaScript -- see above: where you can addRanges – Jeff Atwood Commented Jun 14, 2011 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 Commented Jun 14, 2011 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 Commented Jun 14, 2011 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. – David Ly Commented Jun 14, 2011 at 21:19
• You could fake the selection using CSS background-color. – Casey Chu Commented Jun 14, 2011 at 21:23

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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:

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

本文标签： javascriptNoncontinuous selections in chromeStack Overflow