CODEWITHSUNDEEP
jqueryhtmlcss
Marius S
Marius S

Reputation: 287

Allow text selection only from one div at a time

I have two DIVs with the class "col-lg-6" (bootstrap) which makes them sit side by side. What I am trying to do is to only allow users to select text from one of these DIVs at a time. If he tries to select text from both DIVs in the same time, an error should be displayed.

fiddle:

http://jsfiddle.net/vm7psdt2/

<div class="container">
    <div class="col-lg-6">
        First Paragraph
    </div>
    <br><br>
    <div class="col-lg-6">
       Second Paragraph
    </div>
</div>

The user should only be allowed to select "First Paragraph" OR "Second Paragraph" at a time. Not text from both (eg: "First Paragraph Second" ).

I want this done with javascript or Jquery. Thanks

Upvotes: 1

Views: 1715

Answers (1)

Tats_innit
Tats_innit

Reputation: 34107

Here you go a working demo http://jsfiddle.net/zj5tdpwy/

Minor thing you can tweak is you need to click on div and then select.

There is no direct solution in SO for this but hints are there: (Hopefully this post will solve Jquery way with CSS)

API:

Have a play around it will help :)

Jquery Code

 $(document).on('click','div',function() { 
        $(this).removeClass('unselectable').siblings().addClass('unselectable');
 });

CSS

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

*.unselectable * {
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;
}

Upvotes: 2

Related Questions