CODEWITHSUNDEEP
javascriptcsshtmlevents
Ragen Dazs
Ragen Dazs

Reputation: 2170

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

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;
            }
        }
    }
});

Upvotes: 6

Views: 2698

Answers (2)

2ne
2ne

Reputation: 5986

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

Use the above CSS properties to stop that behavior.

Upvotes: -2

kushyar
kushyar

Reputation: 1191

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.

Upvotes: 5

Related Questions