是否可以将选择仅绑定到一个框？

时间：2020-04-27 21:52:54

标签： javascript html css

我有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>

我现在要做的是，当我开始在第一个方框内选择文本时，我只允许选择该方框内的所有文本，包括子元素，但不能选择它之外的所有文本。

换句话说，选择框内的文本只应在框内开始选择才起作用，而不能超出框框。

这可能吗？如果是，那么解决此问题的最佳方法是什么？

更新

我在上面发布了一个最小的示例。问题是我无法在页面上使用它，因此我花了一些时间来构建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 个答案:

答案 0 :(得分：1)

您可以尝试结合使用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>

答案 1 :(得分：1)

您可以使用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>

相关问题
最新问题