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, May 23 '13 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, May 24 '13 at 01:16

score 5 · Accepted Answer · edited May 23 '17 at 12:22

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 '17 at 12:22

Community

1
1

answered May 23 '13 at 23:42

kushyar

1,191
1
6
10

I try this example and result `TypeError: objEvent.disableTextSelect is not a function` – Ragen Dazs May 23 '13 at 23:47
I have injected this plugin and tested again http://code.jdempster.com/jQuery.DisableTextSelect/jquery.disable.text.select.js - don't works – Ragen Dazs May 23 '13 at 23:52
@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? – kushyar May 23 '13 at 23:54
jQuery v1.9.1 and jQuery UI - v1.10.1 - with `disableSelection()` not worked too – Ragen Dazs May 23 '13 at 23:59
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. – Ragen Dazs May 24 '13 at 00:22
did you get a chance to try preventDefault();? – kushyar May 24 '13 at 00:25
I've tried yor example, have different behavior from my edit. In your I can't select content inside input (And I wish allow user select all text inside all input elements) – Ragen Dazs May 24 '13 at 00:35

score -2 · Answer 2 · edited Aug 22 '20 at 07:18

-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 '20 at 07:18

Jan Schultke

17,446
6
47
96

answered May 23 '13 at 23:37

2ne

5,766
9
30
51

3

The OP was specifically asking for a solution that works for `Ctrl+A`. – Albert Xing May 23 '13 at 23:38
Duplicate question and was answered here with the same answer http://stackoverflow.com/questions/14598070/cross-browser-disable-the-user-select-ctrl-a – 2ne May 23 '13 at 23:41
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." – Albert Xing May 23 '13 at 23:44

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

2 Answers2