jQuery Disable Text Select Plugin

Introduction

While making html elements dragable and using them as clickable areas I noticed some little annoyances, mainly the area being selected. This occurs if the user happends to double click, or if the user clicks some element to expand an item then quickly clicking it again to collapse it. The text would become selected. I personally found this very annoying.

So I’ve written a pretty basic jQuery plugin to help with the problem.

Requirements

Compatibility

So far the plugin has been tested in windows using the following browsers.

Usage

HTML

1
2

<p class="disableSelection">
    this text can't be selected.

Javascript

1
2
3

$(function() {
    $('.disableSelection').disableTextSelect();
});

Downloads

jquery-disable.text.select.example.htm
jquery.disable.text.select.js (1.16 KB)
jquery.disable.text.select.pack.js (1.07 KB)

July 14, 2007 | Filed Under disableTextSelect, jQuery, javascript 

Comments

8 Responses to “jQuery Disable Text Select Plugin”

  1. Mujeebur Rahmansaher on August 20th, 2007 10:02 pm

    Its works on when you try to select through mouse. This wont work when you do CTRL+A or Right click —>Select ALL.

    Thanks

  2. letssurf on August 21st, 2007 1:48 pm

    What browser are you using? It could be that the browser just isn’t capable to block selects in that fashion.

  3. dehneg on November 27th, 2007 1:55 pm

    Hello,

    To disable text selection, your plugin works great !Thanks a lot.
    But I also need a function to enable text selection after it has been disabled by your plugin. It will be useful to add a undisableTextSelect function. Do you agree ?

    Alex

  4. letssurf on November 28th, 2007 1:51 pm

    good point there Alex, I’ve released an updated plugin.

  5. Norin on December 7th, 2007 12:58 pm

    Hi i have a question.
    What if i desable the body tag for selection but i whant on div in that body tag where you can select the text.
    Is that posible.

  6. Borre on January 2nd, 2008 3:22 pm

    In safari my mousedown event got blocked when I would disable my document.onmousedown event. Changing

    $(this).bind(’selectstart’, function() {
    return false;
    });

    with:

    this.onmousedown = function(){return false};

    fixed it. It might be something you would want to look into.

  7. Borre on January 2nd, 2008 3:23 pm

    What I meant to say is: ‘In safari the document.mousedown event would be disabled when I disable (any?) elements with the plugin.’

  8. Anon on April 19th, 2008 4:47 am

    Hi,
    This works great in all browser as noted, but it does not work on my Nintendo Wii Opera browser ;)

    Great piece of code though, very easy to install, test and use