У меня есть contenteditable div, и внутри него есть нередактируемый промежуток, позволяющий пометить текст div длинным щелчком через текст span

Question

У меня есть contenteditable div, и внутри него есть нередактируемый промежуток, что я должен сделать, чтобы иметь возможность выделять текст div длинным щелчком, начиная с текста span и заканчивая тем текстом, который я хочу выделить?Я хочу выбрать только текст внутри div, но НЕ текст внутри нередактируемого span

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 был нажат в области пролета, а затем выберите количествосимволы внутри текста правки

Answer 1

CSS

• Удаление контура фокуса contentEditable внешнего 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>