disable text selection except input

Question

I've got this snippet of code to disable all text selection. How would I go about disabling all text except for input? I tried $('* :not(input)').disableTextSelect(); but it disabled selection for everything (input included)

$.extend($.fn.disableTextSelect = function () {
                return this.each(function () {
                    if ($.browser.mozilla) {//Firefox
                        $(this).css('MozUserSelect', 'none');
                    } else if ($.browser.msie) {//IE
                        $(this).bind('selectstart', function () { return false; });
                    } else {//Opera, etc.
                        $(this).mousedown(function () { return false; });
                    }
                });
            });
            $('* :not(input)').disableTextSelect();

Note that disabling selection changes the default behaviour of the browser and will confuse or even annoy the user. — Felix Kling
– Felix Kling, Commented Jun 9, 2011 at 22:24

deerchao · Accepted Answer · 2013-10-13 16:35:20Z

14

$(document).bind('mousedown selectstart', function(e) {
    return $(e.target).is('input, textarea, select, option, html');
});

Thanks to @user2873592, who mentioned that adding html here would fix the chrome scroll bar can't be dragged issue.

edited Oct 13, 2013 at 16:35

answered Feb 13, 2012 at 6:39

deerchao

10.6k10 gold badges58 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vignesh Subramanian Over a year ago

just pasted it inside document.ready and it worked like a charm !! thanks a lot @deerchao

Stif · Accepted Answer · 2011-06-15 14:59:15Z

5

This works in IE and FF:

    jQuery(document).ready(function () {
        //Disable default text selection behavior
        toggleEnableSelectStart(false);

        //for inputs it must be possible to select text
        jQuery("input[type=text]").focusin(function () { toggleEnableSelectStart(true); });
        jQuery("input[type=text]").mouseover(function () { toggleEnableSelectStart(true); });
        jQuery("input[type=text]").focusout(function () { toggleEnableSelectStart(false); });
        jQuery("input[type=text]").mouseout(function () { toggleEnableSelectStart(false); });

    });

    function toggleEnableSelectStart(enable) {
        document.onmousedown = function (e) { return enable; };
        document.onselectstart = function (e) { return enable; }; ;
    }

edited Jun 15, 2011 at 14:59

answered Jun 15, 2011 at 14:54

Stif

96511 silver badges22 bronze badges

1 Comment

MorningStar Over a year ago

Works for me in IE, FF, Opera & Chrome

natedavisolds · Accepted Answer · 2011-06-09 22:41:10Z

1

The problem seems to be that this disabling is inherited. So, even though you aren't selected them in the $() they still get disabled. But this can also be in our favor.

After disabling, you can enable the inputs.

$('body').css('MozUserSelect', '-moz-none');
$('input').css('MozUserSelect', 'text');

NOTE: the value must be '-moz-none'. If 'none', it can't be changed.

I can't test IE nor do I have a solution for Opera. But maybe this will help part way.

answered Jun 9, 2011 at 22:41

natedavisolds

4,2951 gold badge22 silver badges25 bronze badges

Collectives™ on Stack Overflow

disable text selection except input

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related