Можно ли привязать выделение только к одному блоку? - PullRequest
Новая
       0

Можно ли привязать выделение только к одному блоку?

2 голосов
/ 28 апреля 2020

У меня есть 4 поля текста, как в этом примере здесь: 

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>

Что я хочу сделать сейчас, так это то, что когда я начинаю выделять текст внутри первого блока, я хочу разрешить выбор только каждого текста внутри этого поля, включая дочерний. элементы, но не за его пределами.

То есть, другими словами, выделение текста внутри поля должно работать только в том случае, если выделение началось внутри него, и не должно go из поля.

Возможно ли это? Если да, то как лучше всего с этим справиться?

Обновление

Я разместил минимальный пример выше. Проблема в том, что я не могу заставить его работать на своей странице, поэтому я потратил некоторое время на создание примера 1: 1: 

#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>

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Вы можете использовать user-select: none; и отключить его в фокусе и активен, чтобы иметь возможность выбрать только текущий элемент. 

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>
1 голос
/ 28 апреля 2020

Вы можете попробовать использовать комбинацию атрибута contentEditable и запретить пользователю редактирование с событиями клавиатуры. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...