我有contenteditable div，并且在它内部是一个不可编辑的span，如何能够通过长按在整个span文本上标记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>

更新： 我的意思是即使我在跨度区域上单击鼠标右键也希望能够选择文本，然后选择editabel文本内的字符数

Answer 1

CSS

• 删除ser.where(isinstance(ser, pd.Timestamp)) 外部contentEditable的焦点轮廓
• 用元素围绕可编辑部分
• 使用div聚焦在外部div时，仅在可编辑区域上显示聚焦轮廓

JS

• 我将长按设置为1秒（可调）
• 您将有一项激动人心的任务，即允许仅长时间单击该元素
• 要对其进行测试，请单击外部div（contentEditable='true'）上的任意位置，您应该会看到仅关注文本的可编辑部分

#banner-message

Gif

在[contenteditable ='true']:focus { outline: none; } [contenteditable ='true'] .editable { display: inline-block; } [contenteditable ='true']:focus .editable { outline: 1px dotted gray; } 的开头，我单击了内容的不可编辑部分，没有任何反应。然后，在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;
}