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

Question

I have contenteditable div , and inside it is a noneditable span,what should I do to be able to select the div's text with a long swing click starting on the the span text, and stop at the text I want to select? I want to only select the text inside the div but NOT the text inside the noneditable 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> 

UPDATE: what i mean is i want to be able to select the text even if my mousedown has been clicked on the span area and then select the amount of characters inside the editabel text

Answer 1

CSS

• Remove the focus outline of the contentEditable outer div
• Surround the editable part with an element
• When focused in the outer div with contentEditable='true' , show the focus outline on the editable region only

JS

• I set long press to 1 second (adjustable)
• You will have the exciting task of allowing only long clicks into the element
• To test it, click anywhere on the outer div ( #banner-message ) and you should see the focus on only the editable part of the text

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

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

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

Gif

At the beginning of the gif , I'm clicking on the non-editable part of the content and nothing happens. Then, at the end of the gif , I'm long-clicking on the outer div to show selection of text is working in the proper place.

Demo:

 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>