2

I've 4 boxes of text like in this example here:

html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 70px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
  <div class="box box1"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box2"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box3"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box4"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
</div>

What I want to do now is that when I start selecting text inside box one, I want to only allow the selection of every text inside this box including child elements but not outside of it.

So with other words, selecting text inside a box should only work if the selection started inside it and should not go out of the box.

Is this possible? If yes, whats the best way to deal with this?

Update

I've posted a minimal example above. The problem is that I can't get it working on my page so I've took some time to build a 1:1 example:

#wrapper {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  max-height: 200px;
  border: 1px solid;
  overflow-y: scroll;
  outline: 0;
  user-select: none;
  background: lightgray;
}

#wrapper:active,
#wrapper:focus {
  user-select: initial;
  color: red; //For debugging
}

#wrapper .message {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 12px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

#wrapper .message .content {
  background: #ffffff;
}

#wrapper .message .content-header {
  margin-bottom: 2px;
}

#wrapper .message .content-header,
#wrapper .message .content-footer {
  user-select: none; //Should be always not selectable
}
<div id="outer">
  <div>I should not get marked when marking started inside the wrapper.</div>
  <div id="wrapper" tabindex="-1">
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="container">
        <div class="content">
          <div class="content-header">
            <span class="title">I'm a test title</span>
          </div>
          <div class="content-text">Hello, I'm the content of the message</div>
          <div class="content-footer">
            <span class="time">02:20</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>I should not get marked when marking started inside the wrapper.</div>
</div>
Mr. Jo
  • 4,946
  • 6
  • 41
  • 100
  • Does this answer your question? [Is it possible to limit text selection to current element?](https://stackoverflow.com/questions/48905997/is-it-possible-to-limit-text-selection-to-current-element) – imvain2 Apr 27 '20 at 21:58
  • 1
    @imvain2 You'r answer just works partly. When you start selecting outside of every div, you can still select all once. – Mr. Jo Apr 27 '20 at 22:01
  • You could use `contenteditable="true"` for each box and then you need to stop typing modifying the content on keyboard events. – Darlesson Apr 27 '20 at 22:03
  • @Darlesson This is an idea but actually no option for me because the usecase is different. This is a small workin minimal example I'm showing here. – Mr. Jo Apr 27 '20 at 22:35
  • Then I would go with @temani-afif option. – Darlesson Apr 27 '20 at 22:39

2 Answers2

1

You could try using the combination of the contentEditable attribute and stopping the user from editing with keyboard events.

var elements = document.getElementsByClassName('box');

for (var i = 0, iLen = elements.length; i < iLen; i++) {
  
  elements[i].addEventListener('keydown', function (e) {
    e.preventDefault();
  });
}
html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 70px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
  <div class="box box1" contenteditable spellcheck="false"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box2" contenteditable spellcheck="false"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box3" contenteditable spellcheck="false"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
  <div class="box box4" contenteditable spellcheck="false"><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div></div>
</div>
Darlesson
  • 5,742
  • 2
  • 21
  • 26
1

You can use user-select: none; and disable it on focus and active to be able to select only the current element.

html,
body {
  height: 100%;
  margin: 0;
}

.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.grid2x2>div {
  display: flex;
  flex-basis: calc(50% - 70px);
  justify-content: center;
  flex-direction: column;
}

.grid2x2>div>div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box {
  margin: 20px;
  padding: 15px;
  outline:none;
  -moz-user-select: none;
       user-select: none;
}
.box:active,
.box:focus{
  -moz-user-select: initial;
       user-select: initial;
}
.box1 {
  background-color: red;
}

.box2 {
  background-color: orange;
}

.box3 {
  background-color: purple;
}

.box4 {
  background-color: grey;
}
<div class="grid2x2">
  <div class="box box1" tabindex="-1">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
  </div>
  <div class="box box2" tabindex="-1">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
  </div>
  <div class="box box3" tabindex="-1">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
  </div>
  <div class="box box4" tabindex="-1">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • What is the tabindex for? – Mr. Jo Apr 28 '20 at 20:02
  • 1
    @Mr.Jo to allow the focus event, when you select the text and you unclick the text remain selected – Temani Afif Apr 28 '20 at 20:03
  • Ahh thanks! I'm currently trying to implement this. Seems a bit tricky at the moment – Mr. Jo Apr 28 '20 at 20:05
  • Someone it's not working live on my page. I did everything like you described. – Mr. Jo Apr 28 '20 at 20:26
  • 1
    @Mr.Jo can you share the link to the page? – Temani Afif Apr 28 '20 at 20:36
  • I'm currently working on a 1:1 example and not a minimal version. I had the thought that I can apply it by my own so that I can still learn something but it's not working so I try to reproduce the issue. I thing I'm done editing my question in 10 mintutes. – Mr. Jo Apr 28 '20 at 20:44
  • 1
    @Mr.Jo you should not edit your question using my code to show it's not working. You will make my answer irrelevant. Only edit your question to add more details to your actual example – Temani Afif Apr 28 '20 at 20:45
  • I've added some code of the final element. I know this is not optimal yet but I thought a minimal example would be enough - just to get a hint how it can work. This worked quite well in the past but now I've had a problem.. sorry :( – Mr. Jo Apr 28 '20 at 20:54
  • 1
    @Mr.Jo here is with your code: https://jsfiddle.net/e0zqg2kx/ – Temani Afif Apr 28 '20 at 20:56
  • Thanks a lot! So if I understand it correctly, I need to add tabindex="-1" to every element outside of this? If yes, would there be a way around because otherwise I need to add this to every single element on my page like my navigation, some account things (about 8.000 elements) – Mr. Jo Apr 28 '20 at 21:00
  • @Mr.Jo not all the elements but only the sibling elements concerned or use it on a parent element and it will cover all the child one – Temani Afif Apr 28 '20 at 21:04
  • So for example to the body? – Mr. Jo Apr 28 '20 at 21:28