How can I make a div unselectable?

Question

I would like to make specific div's unselectable Double-clicks, etc. should be blocked.

<div id="test" class="unselectable">asd</div>

$(document).ready(function() {
    $.ctrl = function(key, callback, args) {
        var isCtrl = false;
        $(document).keydown(function(e) {
            if (!args) args = []; // IE barks when args is null
            if (e.ctrlKey) isCtrl = true;
            if (e.keyCode == key.charCodeAt(65) && isCtrl) {
                callback.apply(this, args);
                return false;
            }
        }).keyup(function(e) {
            if (e.ctrlKey) isCtrl = false;
        });
    };

    //Other Method
    $(function() {
        $(document).keydown(function(objEvent) {
            if (objEvent.ctrlKey) {
                if (objEvent.keyCode == 65) {
                    objEvent.disableTextSelect();
                    return false;
                }
            }
        });
    });  
});

But I find, to my chagrin, that this fails to work. How might I modify my code to achieve my objective?

Again, PLEASE, include your code in the question itself so that it remains useful for future readers. jsFiddle links don't last forever and SO is not just about you getting your answer... it's about others who search through questions looking for help too. — Sparky, Apr 22 '12 at 22:50
As far as your question, I would not try to disable `ctrl-a` or any other operating system command. — Sparky, Apr 22 '12 at 22:52
Why should i include the code here? It's to long and dont work... I dont realy want to disable ctrl + a, i just want, when it get pressed, that the specific div's dont get selected. — Lizzaran, Apr 22 '12 at 22:56
What part of the explanation in my comment is not understood? Some day somebody will read your question and click on the jsFiddle to see your code, but then the link will be dead... that means they will not be able to see your code. Get it? — Sparky, Apr 22 '12 at 22:58
You can't stop users copying text or images from a web page. — RobG, Apr 22 '12 at 23:01
@RobG: True, they could always go into your HTML/source code-- although you could even find ways to prevent that, actually. — Elliot Bonneville, Apr 22 '12 at 23:02
I dont want to prevent copy text or images. The whole site is just a fullscreen map with div tile's. And when Ctrl + A is pressed, it can't get unselected, the user would have to reload the map, go back to his position and this would cost additional server performance. — Lizzaran, Apr 22 '12 at 23:08
@ElliotBonneville—you don't need to access the markup, anything that is accessible to the client can be copied. Anyhow, that doesn't seem to be the OP's issue. — RobG, Apr 23 '12 at 00:17
@Lizzaran—in most browsers, simply clicking anywhere in the page will de-select whatever has been selected. Perhaps you need a small neutral area in the page that is safe for users to click on. — RobG, Apr 23 '12 at 00:24

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

You don't need Javascript for this (reference answer). Do this:

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

edited May 23 '17 at 12:25

Community

1
1

answered Apr 22 '12 at 22:56

Elliot Bonneville

51,872
23
96
123

1

You can't do it with CSS in IE < 10. See [this better reference answer](http://stackoverflow.com/a/4358620/96100). – Tim Down Apr 22 '12 at 23:12
It doesn't work generally, it only works in some browsers in some cases. – RobG Apr 23 '12 at 00:21

Gordon Gustafson · Answer 2 · 2012-04-22T23:07:09.883

2

As far as I know, there is no way to stop the user from selecting the text on a div. Since this is a browser and potentially operating-system related feature, its beyond the realm of things you can typically manipulate with Javascript.

If you wanted to be incredibly annoying to your user, you could create an event handler on the entire document that would check if the user ever pressed control-A together, and if so, try to prevent the div from being selected by preventing the default action or focusing on some other part of the page. However, this would do little more than piss them off that you are trying to keep them from using their computer the way they want to and probably make them hightail it out of your website.

Could you give us a little more background on why you don't want the user selecting something? There will always be a workaround to whatever you do, considering they can just disable javascript/CSS and reload the page. If you want to make text a little more difficult to copy-paste you can make an image containing the desired text and place that in the div instead, but you're still just spending your time just to make the user more annoyed with your website.

While I'm not going to claim in the slightest that I know your entire project so well that I can tell you exactly what you should be doing, I will say there's probably a better way to accomplish whatever goal your working towards. If you post a little more detail, we can probably help you find it. :D

edited Apr 22 '12 at 23:07

answered Apr 22 '12 at 22:55

Gordon Gustafson

40,133
25
115
157

Sorry, but you don't know far enough; see my answer about using CSS to prevent text selection. =P – Elliot Bonneville Apr 22 '12 at 22:57
Actually, removing my downvote because this is still good information. Just note that your first statement isn't correct... – Elliot Bonneville Apr 22 '12 at 23:01
@ElliotBonneville Wow, I didn't know there was a CSS feature for that! However, I still wanted to emphasize that this really isn't something that really should be done, and the user can still circumvent the CSS method by disabling the stylesheet. Bottom line: If the user wants to select it, they will find a way, and I can't think of very many legitimate reasons to prevent the user from selecting text. :D – Gordon Gustafson Apr 22 '12 at 23:02
That's very true, there's almost always another option. Although, it is possible to prevent the user from selecting your text (even if they try to go into your source code), but it would be annoying to them and a pain for you. – Elliot Bonneville Apr 22 '12 at 23:04
Why i want to disable Ctrl + A? Because the whole site is just a fullscreen map with div tile's. And when Ctrl + A is pressed, it can't get unselected, the user would have to reload the map, go back to his position and this would cost additional server performance. – Lizzaran Apr 22 '12 at 23:07
@CrazyJugglerDrummer Any UI text looks terrible when interacted with and the text gets selected, that's the reason for preventing text selection. – Esailija Apr 22 '12 at 23:08
@Lizzaran: In that case, you would be best off with my answer. – Elliot Bonneville Apr 22 '12 at 23:10
@Lizzaran Why can't it get unselected? – Gordon Gustafson Apr 22 '12 at 23:11
@Elliot Bonneville I already tried that, dont work for ctrl+a – Lizzaran Apr 22 '12 at 23:17
@CrazyJugglerDrummer JQuery-UI (draggable) blocks it, no idea why. Have to look for a fix. – Lizzaran Apr 22 '12 at 23:18

score 1 · Answer 3 · edited May 23 '17 at 11:53

1

I've answered at least three similar questions on SO with a fairly definitive answer. Here's the most popular.

I've also updated your jsFiddle with information from that answer to work in IE: http://jsfiddle.net/VYKfL/3/

edited May 23 '17 at 11:53

Community

1
1

answered Apr 22 '12 at 23:15

Tim Down

318,141
75
454
536

Doesn't prevent ctrl+a for me in IE – Esailija Apr 22 '12 at 23:16
Hmm. So it doesn't. That scuppers things. – Tim Down Apr 22 '12 at 23:21
@Esailija: Firefox also does not prevent selection of an unselectable element via select-all. – Tim Down Apr 22 '12 at 23:24
The only practical way is probably to poll document selection and clear it. http://jsfiddle.net/VYKfL/4/ works for me in IE7-9 – Esailija Apr 22 '12 at 23:25
@Esailija: Which is getting a bit evil. Disabling selections completely is one thing but allowing the user to select and the have it disappear in a flash is worse. IE and WebKit have a `selectionchange` event on Document nodes that detects, as the name suggests, changes in the selection. Firefox has nothing equivalent. – Tim Down Apr 22 '12 at 23:28
@Esailija: Btw, no modern browser has `window.getSelection()` without a `removeAllRanges()` method, so you could drop the `window.getSelection().empty()` branch, which is non-standard and I think applied only to Safari 1 and possibly 2. – Tim Down Apr 22 '12 at 23:31
It was just a proof of concept, the idea is to poll for the selection to contain the elements you want to be unselectable, not to blindly deselect constantly. – Esailija Apr 22 '12 at 23:35

How can I make a div unselectable?

3 Answers3

Linked