How to disable text selection via jQuery?

Question

I know this question have been already asked (here), but all the answers I've found dealt with css selector :selection (that is not yet too widely supported by browsers).

So, how can I disable text selection on my html page via jQuery, not relying on css tricks?

score 14 · Answer 1 · edited Aug 28 '15 at 13:08

14

Here is a simple one-liner to disable selecting text on your whole page. (whether you should or not is another question)

$(document).bind('selectstart dragstart', function(e) {
  e.preventDefault();
  return false;
});

edited Aug 28 '15 at 13:08

Legionar

7,472
2
41
70

answered Mar 05 '13 at 03:08

Halfhoot

310
3
10

1

Thanks! Simple, elegant solution. – Dominique Apr 13 '13 at 21:42
Thanks, even works with jQuery-UI if you remove the `dragstart` – zero298 Oct 14 '13 at 15:14

Dennis · Answer 2 · 2011-10-06T17:55:22.200

If you want to avoid plugins, you can extract the relevant parts from the jQuery UI source:

/*!
 * jQuery UI 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI
 */
$.support.selectstart = "onselectstart" in document.createElement("div");
$.fn.disableSelection = function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
        ".ui-disableSelection", function( event ) {
        event.preventDefault();
    });
};

$("#somediv").disableSelection();

score 4 · Answer 3 · answered Oct 06 '11 at 14:06

4

Include jQuery UI and use $(element).disableSelection().

However, disabling text selection is very user-unfriendly unless used in a context where accidental selections are likely (e.g. Drag&Drop or buttons where users are likely to doubleclick to perform multiple changes faster (e.g. in spinners))

answered Oct 06 '11 at 14:06

ThiefMaster

310,957
84
592
636

all right, but I'd prefer not to add any plugins because I'm operating on 3-rd party website that has only jquery plugged in (injecting my small javascript snippet) – Oct 06 '11 at 14:08

score -2 · Accepted Answer · answered Oct 06 '11 at 14:09

-2

Try that http://code.jdempster.com/jQuery.DisableTextSelect/jquery.disable.text.select.js

answered Oct 06 '11 at 14:09

KodeFor.Me

13,069
27
98
166

It seems cross-browser enough, thnx! – Oct 06 '11 at 14:12
1

This was a good solution, but unfortunately `$.browser` has been removed as of 1.9 so this will fail. – Gary Aug 16 '13 at 16:01
1

The link is broken... And also this is not correct solution - Halfhoof's is correct and should be accepted. – Legionar Aug 28 '15 at 13:07

How to disable text selection via jQuery?

4 Answers4