jQuery: Binding "CTRL+A" to only select specific area only

Question

What I'm trying to do is, when CTRL+A is pressed, the shortcut for select all; I don't want it select everything but only a specific area (like everything inside containers with a class of xyz). However, I'm not able to get anything working. Even just using select() is not working. Example:

$("table").select();

I tried using a js solution I found here, but it was binding it if a certain area is active and I couldn't work around it. This is the code:

$(document).keydown(function(e) {
    if (e.keyCode == 65 && e.ctrlKey) {
        var range = document.createRange();
        range.selectNode(document.getElementById('table'));
        window.getSelection().addRange(range);
        e.preventDefault();
    }
});

I have created a jsfiddle here: http://jsfiddle.net/zpd8yLn7/

What I want is that the text inside class="class" be selected whenever CTRL+A is pressed.

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

2

In case you are open to a purely css solution: JS Fiddle

body > :not(.class) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

References:

CSS rule to disable text selection highlighting

CSS-Tricks - not(s)

edited May 23 '17 at 12:22

Community

1
1

answered Mar 14 '15 at 05:22

Derek Story

8,888
1
18
33

This looks good and works. Is this compatible with all modern browsers? – AliIshaq Mar 14 '15 at 09:23
Yes. Chrome 6.0+, Firefox, Opera 15+, Safari 3.1+, IE10+ – Derek Story Mar 14 '15 at 15:44

jQuery: Binding "CTRL+A" to only select specific area only

1 Answers1