Prevent multiple selection of a div

Question

I have multiple divs on my page.I want to copy selected text from div1 to div2 only.Selection on div2, div3, div4 should not get copied. If ctrl+A is pressed or multiple divs are selected at a time, copy should not happen.

//Validation for including text only from specified div

$('#DocumentText').mouseup(function (e) {
    debugger;
    isSelected = true;
    flaginclude = 1;

    // e.stopPropagation();
});

$(document).mouseup(function (e) {
    debugger;

    if (flaginclude != 1) {
        e.stopImmediatePropagation();
        isSelected = false;
    }
    flaginclude = 0;
});

myfunction()
{
 if(isSelected)
 {
   //logic to append selected text on div2
 }
}

Have a go at it yourself first and then if you get stuck, post here. — billyonecan, Sep 18 '12 at 12:52
I did. I am able to restrict copying only from div2, but unable to handle ctr+A scenario and also if I select all the divs by dragging my mouse, scrolls which separates my divs also get copied. — user1551056, Sep 18 '12 at 12:55

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

There is no dependable way to ensure this. However selection can be prevent on modern browsers using no-select.

#div1, #div2 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[Source]

edited May 23 '17 at 12:27

Community

1
1

answered Sep 18 '12 at 12:56

Starx

77,474
47
185
261

I dont want to stop the selection of text anywhere – user1551056 Sep 18 '12 at 13:09
@user1551056, If the user has the text loaded on their screen, they can copy them any way. You can do nothing to prevent this. You can slow them down a bit, but cannot __stop__ them. – Starx Sep 18 '12 at 13:11
Is there no way to caputre selected text only from a particular div?? :( – user1551056 Sep 18 '12 at 13:19
You can capture some events to prevent some, but all fails when the script is deactivated. SO its really not worth the effort. – Starx Sep 18 '12 at 15:48

score 0 · Answer 2 · answered Sep 18 '12 at 13:10

You could provide your own keyboard listener to try and block the copy/paste keyboard shortcuts, and block the right mousebutton to prevent the user from using hte context menu - but this would be veeery nasty from a UE perspective.

I haven't got code in front of me to check, but iirc you could instead listen for an 'onchange' (or similar) event on Div2, and every time it fires inspect the contents (and check whether they match content from Div1). Use of a hidden element as a history buffer would allow you to rollback any content that wasn't from Div1 (as well as identifying the new content)

My scenario is: 1. I am selecting text on div 2 2. I click on "include" button. this captures my selected text(in var selected(say)) 3. selected gets appended to div1. My problem is I should not be getting text in "selected" which is outside div2 — user1551056, Sep 18 '12 at 13:34

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

You can alter the selection after the event to be limited to just a particular element. Here's an example of how to get just text selected within a particular element:

https://stackoverflow.com/a/5801903/96100

Here's an example function that uses my Rangy library to limit a selection:

Live demo: http://jsfiddle.net/nm3FM/

Code:

function limitSelectionToElement(el) {
    var selectedRange = null;
    var sel = rangy.getSelection();
    var elRange = rangy.createRange();
    elRange.selectNodeContents(el);
    if (sel.rangeCount) {
        selectedRange = sel.getRangeAt(0).intersection(elRange);
    }
    elRange.detach();
    sel.setSingleRange(selectedRange);
}

Prevent multiple selection of a div

3 Answers3