我有 contenteditable div ，里面是一个不可编辑的跨度，如何通过跨度文本长按来标记 div 的文本

Question

我有 contenteditable div ，里面是一个不可编辑的跨度，我应该怎么做才能 select div 的文本长按点击开始在跨度文本上，停在我想要的文本 select? 我只想 select 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>

更新：我的意思是我希望能够 select 文本，即使我的 mousedown 已在跨度区域上单击，然后 select editabel 文本中的字符数量

Answer 1

CSS

去掉contentEditable外层的焦点轮廓div
用元素包围可编辑部分
当聚焦在外部 div 和 contentEditable='true' 时，仅在可编辑区域显示聚焦轮廓

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>

我有 contenteditable div ，里面是一个不可编辑的跨度，如何通过跨度文本长按来标记 div 的文本

I have contenteditable div , and inside it is a noneditable span, how to be able to mark the div's text with a long click thrugh the span text

html

javascript

css

jquery

contenteditable