CSS or Javascript to disable text selection highlighting from CTRL + A

Question

Note: this questions is different from How to disable text selection highlighting using CSS?

Before ask I read the discussion history from above question. All works fine, except I can allow CTRL+A (Select All) only works inside input elments.

That's because I'm deploying my HTML5 app on Desktop and I wish the same behavior from a GUI/Forms application.

What would be the starting point? Try to bind at all elements with keypress event and observe CTRL + A keyCode? The disadvantage of this approach would have to be controlling everything and take care on re-renders.

I prefer a CSS solution, but any idea is welcome.

Thanks in advance.

@EDIT: I found this ulgy solution, but working:

$(document).keydown(function(objEvent) {
    if (objEvent.ctrlKey) {
        if ((objEvent.keyCode === 65) || (objEvent.keyCode == 97)) {
            if ($(objEvent.target).not("input").disableTextSelect().length) {
                return false;
            }
        }
    }
});

The question is not clear. You want the text to be selected with Ctrl+A only? — Thanh Trung
– Thanh Trung, Commented May 23, 2013 at 23:46
Why in the entire world do you want to do this? It's not your business to try an circumvent fundamental browser behaviour. — user229044
– user229044 ♦, Commented May 24, 2013 at 1:16

Community · Accepted Answer · 2017-05-23 12:22:45Z

5

Possible Duplicate.

If you are allowed to use jquery, here is the answer you are looking for.

65 is ascii for 'A' and 97 for 'a' if you want to account for both.

$(function(){   
    $(document).keydown(function(objEvent) {

            if (objEvent.ctrlKey) {
                if ($(objEvent.target).not('input')){
                    if (objEvent.keyCode == 65 || objEvent.keyCode == 97) {                         
                        objEvent.preventDefault();
                    }
                }
            }        
    });
});

edit: modified based on your comment to allow for input.

edit 2: if you include jQuery UI you can use disableSelection() instead of disableTextSelect() otherwise try this.

edit 3: Sorry, disableSelection() is deprecated in jQuery 1.9 see here.. Try this simple hack instead of disableSelection(). replace objEvent.disableTextSelect(); with objEvent.preventDefault(); above.

edit 4: made it a bit cleaner.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered May 23, 2013 at 23:42

kushyar

1,1911 gold badge6 silver badges10 bronze badges

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

7 Comments

Ragen Dazs Over a year ago

I try this example and result TypeError: objEvent.disableTextSelect is not a function

Ragen Dazs Over a year ago

I have injected this plugin and tested again code.jdempster.com/jQuery.DisableTextSelect/… - don't works

kushyar Over a year ago

@AllysondePaula which version of jQuery are you including? did you try the second approach (including jQuery UI and using disableSelection())? What is the error you are getting?

Ragen Dazs Over a year ago

jQuery v1.9.1 and jQuery UI - v1.10.1 - with disableSelection() not worked too

Ragen Dazs Over a year ago

I found one solution - it's ugly, but works, see my edit. I will accept your asnwer as correct, because solve almost part of the problem.

|

Jan Schultke · Accepted Answer · 2020-08-22 07:18:39Z

-2

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

Use the above CSS properties to stop that behavior.

edited Aug 22, 2020 at 7:18

Jan Schultke

43.6k8 gold badges109 silver badges188 bronze badges

answered May 23, 2013 at 23:37

2ne

6,0169 gold badges35 silver badges52 bronze badges

3 Comments

Albert Xing Over a year ago

The OP was specifically asking for a solution that works for Ctrl+A.

2ne Over a year ago

Duplicate question and was answered here with the same answer stackoverflow.com/questions/14598070/…

Albert Xing Over a year ago

My impression is that the OP wants to allow Ctrl+A: "All works fine, except I can allow CTRL+A (Select All) only works inside input elments."

Collectives™ on Stack Overflow

CSS or Javascript to disable text selection highlighting from CTRL + A

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related