Disable text selection dynamically per click via javascript?

Question

I have a table which I've added some multiple selection functionality where shift + click selects rows between the first click and second click but it ends up highlighting all text between the rows.

I don't want to disable text selection via CSS because this stuff really does need to be selectable, just not when shift + clicking when my multi-select function fires.

Can this be done?

    var lastChecked;    
    $("#contact_table tr").click(function(e) {
        if (e.target.getAttribute('type') == 'checkbox') {
            return;
        };  
        if (e.shiftKey && lastChecked) {
            // select between last point and new point
            var tableRows = $("#contact_table tr");
            var newRow = tableRows.index($(this));
            var oldRow = tableRows.index(lastChecked);
            if (oldRow < newRow) {
                newRow = newRow +1;
            }
            var sliceRange = [newRow, oldRow].sort();
            var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
                .find('input[type=checkbox]').attr('checked', true);
        } else {
            var checkbox = $(this).find('input[type=checkbox]');
            var checked = toggleCheckbox(checkbox);
            if (checked) {
                lastChecked = $(this);
            }               
        };
        recalculateSelectedButton();
    });

Can you share your multi-select function? I think you should be able to prevent the default behavior within your event handler. — PJH
– PJH, Commented Aug 15, 2012 at 20:16
@JoelPurra yes, I reference that method in my post. I'm curious if there's a JS event that can hijack this behavior instead of dynamically setting CSS temporarily (I'm not even sure if that would work, as the click has already begun). — Yuji 'Tomita' Tomita
– Yuji 'Tomita' Tomita, Commented Aug 15, 2012 at 20:48
@YujiTomita: in order to be able to test this, I still recommend you to add a jsfiddle with your example. — Joel Purra
– Joel Purra, Commented Aug 15, 2012 at 21:45

Community · Accepted Answer · 2017-05-23 12:12:18Z

1

You can deselect all text with javascript; add a call to RemoveSelection() after you run the multi-select logic.

From http://help.dottoro.com/ljigixkc.php via Clear a selection in Firefox

function RemoveSelection () {
    if (window.getSelection) {  // all browsers, except IE before version 9
        var selection = window.getSelection ();                                        
        selection.removeAllRanges ();
    }
    else {
        if (document.selection.createRange) {        // Internet Explorer
            var range = document.selection.createRange ();
            document.selection.empty ();
        }
    }
}

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Aug 15, 2012 at 21:47

Joel Purra

25.3k8 gold badges66 silver badges62 bronze badges

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

3 Comments

Yuji 'Tomita' Tomita Over a year ago

Joel, you found it! That works brilliantly, and apparently even on IE. Thank you!

Joel Purra Over a year ago

Finally! Even a blind squirrel finds a nut once in a while =)

Yuji 'Tomita' Tomita Over a year ago

it's much appreciated, booya!

Community · Accepted Answer · 2017-05-23 12:20:08Z

1

You can try disabling user select based on the number of checked checkboxes. If there are any, just add the CSS style user-select: none; (and prefixed versions) to the #contact_table.

If you provide a jsfiddle with your current javascript code and table, I'd test the code too - now it's as-is ;) I'm not sure how the click interactions will play out with any cancelled event bubbling etcetera. Also, this implementation doesn't take into account that users might want to select text even if there's a checked checkbox (so it might not be what you're looking for).

$(function() {
    var $contactTable = $("#contact_table"),
        userSelectNoneClass = "user-select-none";

    $contactTable.on("change", ":checkbox", function(e) {
        var numberOfCheckedRows = $("#contact_table :checkbox:checked").length,
            anyCheckedRows = (numberOfCheckedRows > 0);

        if (anyCheckedRows && $contactTable.hasClass(userSelectNoneClass)) {
            $contactTable.addClass(userSelectNoneClass);
        } else {
            $contactTable.removeClass(userSelectNoneClass);
        }
    });
});

.user-select-none
{
    /* From https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Edit: using the change event instead.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 15, 2012 at 21:03

Joel Purra

25.3k8 gold badges66 silver badges62 bronze badges

2 Comments

Yuji 'Tomita' Tomita Over a year ago

Joel, I appreciate your time. Thank you! It's a good idea, but it would be nice not to resort to preventing selection at all except for during the multi click. I think users would be confused if only unchecked boxes were selectable as people are rarely aware of text selection in the first place. "Why wont' this darn thing work??"

Joel Purra Over a year ago

@YujiTomita: yeah, thought of that after I implemented the code ;)

Collectives™ on Stack Overflow

Disable text selection dynamically per click via javascript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related