How can I make certain parts of my html not selectable?

Question

I have some absolutely positioned divs that keep getting selected if a user tries to select the content of my page.

Is there a way to make it so certain elements (such as those divs) aren't selectable?

EDIT: The main issue is when someone copies these absolute div's and then pastes them into the rich text editor on my site, the rich text editor breaks on IE.

possibly related question: http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable — Sebastian Patane Masuelli, Nov 30 '10 at 02:10
The jQuery solution suggested below looks promising, if it won't work for you, it shouldn't be complicated to construct something with pure JavaScript as well, just let us know. :) — Shadow The GPT Wizard, Nov 30 '10 at 08:33

SLaks · Answer 1 · 2010-11-30T02:27:42.470

9

For IE, add the attribute unselectable="ON". (EDIT: Although it won't completely help)

For Gecko, add the CSS style -moz-user-select: none.

For WebKit, add the CSS style -webkit-user-select: none.

edited Nov 30 '10 at 02:27

answered Nov 30 '10 at 02:04

SLaks

868,454
176
1,908
1,964

Tried `unselectable="ON"` and it didn't work. Reading MSDN says: `An element with the UNSELECTABLE attribute set to on can be included in a selection that starts somewhere outside the element.` So it still gets unintentionally selected when they try to copy the content area. – Kyle Nov 30 '10 at 02:10
+1 Great! And the unselectable attribute works in Opera, too. – Šime Vidas Nov 30 '10 at 02:13

score 4 · Accepted Answer · answered Nov 30 '10 at 02:08

4

If you want to just hide selection rectangle, you can use

element::selection { background: transparent }

and it's counterpart for Gecko

element::-moz-selection { background: transparent }

If you want to help your users select right text to copy to clipboard, you can move the element away. Usually browsers retain order of elements as they are defined in HTML when selecting. While it is not perfect solution, you can place the element's code in HTML either at the very beginning or very end of <body> tag. This way, if user selects something in the middle of the page, the element will be too "far away" to interfere.

answered Nov 30 '10 at 02:08

Athari

33,702
16
105
146

+1 - Yes, I want to help them select the right text for copying. Good suggestion about putting the absolute divs too far away to be selected. – Kyle Nov 30 '10 at 02:13
+1 @Athari : This is the correct solution. Since your `div`s are absolute position'ed, you can reorder where they appear within the HTML. This would help user's select the right text.In fact, I commend you @Kyle for taking this into consideration, as I do get really annoyed when random `div`s get selected when I try to clip selections. – bguiz Nov 30 '10 at 02:19

score 4 · Answer 3 · edited Nov 30 '10 at 02:30

4

this article might help with a cross-browser solution: (uses jQuery) http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

in theory, you can extend the jQUery core using this:

jQuery.fn.extend({ 
    disableSelection : function() { 
            return this.each(function() { 
                    this.onselectstart = function() { return false; }; 
                    this.unselectable = "on"; 
                    jQuery(this).addClass('unselectable');
            }); 
    } 
});

and applying it like this:

// disable selection on selected objects 
$('.myClass').disableSelection();

you must make sure you have this in your stylesheet:

.unselectable {
    user-select: none; 
    -o-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
}

looks as if it basically does what SLaks and Sime have mentioned. i haven't tried it, but i'd be interested to know if it works

edited Nov 30 '10 at 02:30

Šime Vidas

182,163
62
281
385

answered Nov 30 '10 at 02:12

Sebastian Patane Masuelli

4,217
1
18
23

@Sebastian Conserning the various user-select properties, it would be more efficient to define a class: `.unselectable { user-select:none; -moz-user-select:none; ... }` and then to just write: `$(this).addClass("unselectable")`. – Šime Vidas Nov 30 '10 at 02:20
@Sime but how about IE? i'm assuming that `this.unselectable = "on";` takes care of explorer. otherwise, you are entirely correct. – Sebastian Patane Masuelli Nov 30 '10 at 02:22
@Sebastian That line for IE is OK. But those 5 lines with the css() methods should be replaced with addClass() as I said. – Šime Vidas Nov 30 '10 at 02:23
@Sebastian The user-select properties make it work in Firefox, Chrome and Safari. The unselectable attribute makes it work in IE and Opera. But, I don't know for what browsers the onselectstart property is intended. ... But it doesn't hurt. – Šime Vidas Nov 30 '10 at 02:32
@Šime i believe `onselectstart` is only read by IE as well, but js is not my forté. http://msdn.microsoft.com/en-us/library/ms536969(VS.85).aspx – Sebastian Patane Masuelli Nov 30 '10 at 02:37
@Šime: i guess you didn't like selectMeNot as a class? Just you wait until i'm able to edit posts ;) – Sebastian Patane Masuelli Nov 30 '10 at 02:38
@Sebastian Hehe :) In programming we always strive for the simplest solution - in this case naming the class the same as the IE attribute. – Šime Vidas Nov 30 '10 at 02:44
@Sime: I know, i know, i was just joking with you. more importantly: does it work? – Sebastian Patane Masuelli Nov 30 '10 at 02:46
i don't have IE so i can't test here. – Sebastian Patane Masuelli Nov 30 '10 at 02:47
@Sebastian I tested te unselectable attribute in IE9 beta and it works. – Šime Vidas Nov 30 '10 at 03:16
@Sime: thanks! but IE9 suports ` user-select: none;`, i wonder if it works on IE7 + 8. I'll have to check that when i get a hold pf a pc. – Sebastian Patane Masuelli Nov 30 '10 at 03:18
@Sebastian IE9 supports user-select? Do you have a source? My IE9 beta doesn't support it. – Šime Vidas Nov 30 '10 at 13:50
@Šime: Interesting. these are my sources: http://msdn.microsoft.com/en-us/library/ff974378(VS.85).aspx and http://www.quirksmode.org/css/contents.html – Sebastian Patane Masuelli Nov 30 '10 at 16:36
@Šime: they say it is supported in ie9, but with only one colon it seems, and the add this note: The :selection pseudo-element is no longer defined in the current CSS3 specification, but is supported in many popular browsers. – Sebastian Patane Masuelli Nov 30 '10 at 16:37
so no, they don't support user-select, but they support :selection. which seems to accompish the same thing. sorry obut the confusion. – Sebastian Patane Masuelli Nov 30 '10 at 16:40

score 3 · Answer 4 · answered Nov 30 '10 at 02:02

3

You can use the ::selection pseudo-element to make the selection of a certain element "invisible":

p::selection { background-color:transparent; }  
p::-moz-selection { background-color:transparent; }

However, that doesn't work in IE.

answered Nov 30 '10 at 02:02

Šime Vidas

182,163
62
281
385

but they will support it in IE9! – Sebastian Patane Masuelli Nov 30 '10 at 02:05

score 2 · Answer 5 · answered Nov 30 '10 at 08:26

2

jQuery Solution:

$(".unselectable").disableSelection();

answered Nov 30 '10 at 08:26

Jeaf Gilbert

11,495
19
78
105

How can I make certain parts of my html not selectable?

5 Answers5