我有contenteditable div，里面是一个不可编辑的范围，如何能够通过长按文本标记div的文本

Question

我有contenteditable div，里面是一个不可编辑的跨度，我应该怎么做才能从跨文本开始选择div的文本，然后停留在我要选择的文本？我想只选择div中的文本，而不是非编辑范围内的文本

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
span{
  color:lightgrey;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 100%;
}

<div id="banner-message">
  <div contenteditable ='true'>
  some editable text
  <span class="main-search-placeholder" contenteditable="false" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"  
   unselectable = "on" 
   onselectstart = "return false;" 
   onmousedown = "return false;"> 
  some other noneditable text
</span>

  </div>
</div>

更新：我的意思是我希望能够选择文本，即使我的mousedown已被点击跨度区域，然后选择editabel文本内的字符数量

Answer 1

CSS

• 删除contentEditable外部div的焦点轮廓
• 使用元素环绕可编辑部分
• 当使用contentEditable='true'聚焦在外部div中时，仅在可编辑区域显示焦点轮廓

JS

• 我把长按设置为1秒（可调）
• 您将拥有令人兴奋的任务，即只允许长时间点击该元素
• 要测试它，单击外部div（#banner-message）上的任意位置，您应该只关注文本的可编辑部分

[contenteditable ='true']:focus {
  outline: none;
}

[contenteditable ='true'] .editable {
  display: inline-block;
}

[contenteditable ='true']:focus .editable {
  outline: 1px dotted gray;
}

GIF

在gif的开头，我点击了内容的不可编辑部分，没有任何反应。然后，在gif的末尾，我点击外面的div，以显示选择的文本正在适当的地方工作。

演示：

var pressTimer;
var bannerMessage = document.getElementById("banner-message");
var editableRegion = bannerMessage.querySelector("[contenteditable ='true'] .editable");

function handleMouseUp() {
  clearTimeout(pressTimer);
  return false;
}

function handleMouseDown() {
  pressTimer = window.setTimeout(function() {

    if (document.body.createTextRange) {
      const range = document.body.createTextRange();
      range.moveToElementText(editableRegion);
      range.select();
    } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(editableRegion);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }, 1000);
  return false;
}

bannerMessage.addEventListener("mouseup", handleMouseUp);
bannerMessage.addEventListener("mousedown", handleMouseDown);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

span {
  color: lightgrey;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 100%;
  outline: none;
}

[contenteditable='true']:focus {
  outline: none;
}

[contenteditable='true'] .editable {
  display: inline-block;
}

[contenteditable='true']:focus .editable {
  outline: 1px dotted gray;
}

<div id="banner-message">
  <div contenteditable='true'>
    <div tabindex="-1" class="editable">some editable text</div>
    <span class="main-search-placeholder" contenteditable="false" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" onselectstart="return false;" onmousedown="return false;"> 
  some other noneditable text
</span>

  </div>
</div>