1

I'm using this CSS to disable text selection. It works in Chrome and Safari, but not in Firefox

*.e-pdfviewer-pageCanvas {
    -moz-user-select: -moz-none !important;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

*.e-pdfviewer-pageCanvas * {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    user-select: text;
}

2 Answers 2

3

With the following code you can disable text selection in the entire webpage, except inputs and textareas:

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") {
        e.preventDefault();
        return false;
    }
    return true;
};

Alternatively, if you want to disable text selection completely you can use this code:

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    e.preventDefault();
    return false;
};

If you want to disable text selection only for the elements having the class .e-pdfviewer-pageCanvas you can use:

var pdfviewer = document.getElementsByClassName("e-pdfviewer-pageCanvas");

for (var i = 0; i < pdfviewer.length; i++) {
    pdfviewer[i].onselectstart = function(e) {
        e.preventDefault();
        return false;
    };
};

[EDIT]:

If none of the aforementioned solved your issue, use the following code in your HTML <body> or the element you want to disable text selection for specifically:

<body onselectstart = "return false;" style = "-moz-user-select: none;">...</body>

Or in JavaScript:

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {return false};

document.getElementsByTagName("BODY")[0].style.mozUserSelect = "none";
Sign up to request clarification or add additional context in comments.

3 Comments

The Entire canvas gets selected while selecting the text ,i have used onselectstart and also css but also the selection appears in Firefox only
Doesn't this also disable selection of content in text/input fields
No, because I use this line e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA".
1

Try this simple jQuery plugin:

jQuery.fn.extend({
    disableSelection : function() {
        this.each(function() {
            this.onselectstart = function() { return false; };
            this.unselectable = "on";
            jQuery(this).css({
                 '-moz-user-select': 'none'
                ,'-o-user-select': 'none'
                ,'-khtml-user-select': 'none'
                ,'-webkit-user-select': 'none'
                ,'-ms-user-select': 'none'
                ,'user-select': 'none'
            });
        });
    }
});

$('.e-pdfviewer-pageCanvas').disableSelection();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.