javascript - 如果另一个元素具有焦点，如何保持突出显示的文本？

Question

需要插入链接(替换突出显示的文本)

想法是 - 选择 lorem - 在输入中键入 href - 然后按 Enter - 设置链接。

问题 - 如果 inpa 具有焦点，则突出显示的文本不会突出显示。

有什么解决办法吗？

$('#inpa').on('keypress', function(e){
	if(e.keyCode == 13){
        let a = $('#inpa').val();
        let b = window.getSelection().toString();
        let ht = "<a href = '" + a + "' target = '_blank'>" + b + "</a>";
        document.execCommand('insertHTML', ht);
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>lorem ipsum</div>
<br>
<input type='text' class='inpa' id='inpa'>

Answer 1

这是我在评论中谈论的有关记住范围并重新创建它的基本想法。

// took this function getSelectionHtml from https://stackoverflow.com/questions/4652734/return-html-from-a-user-selected-text
function getSelectionHtml() {
  var html = "";
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var container = document.createElement("div");
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
      }
      html = container.innerHTML;
    }
  } else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
      html = document.selection.createRange().htmlText;
    }
  }
  return html;
}


// this gets the selection, and holds on to it. It returns a function if it has a range that will recreate the selection
const selectionSaveRestore = () => {
  let range
  let sel
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
  }
  if (range) {
    return () => {
      if (window.getSelection) {
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      } else if (document.selection && range.select) {
        range.select();
      }
    }
  }
  return null;
}

let recreateRange
const tb = document.querySelector("#test");
tb.addEventListener("focus", () => {
  recreateRange = selectionSaveRestore()
})

tb.addEventListener("keypress", evt => {
  if (evt.which === 13 && recreateRange) {
    recreateRange()
    const a = evt.target.value;
    const b = getSelectionHtml()
    const ht = "<a href='" + a + "' target='_blank'>" + b + "</a>"
    document.execCommand('insertHTML', false, ht);
  }
})

<div id="foo" contenteditable="true">
  Bacon ipsum dolor amet leberkas spare ribs swine, tenderloin t-bone pork chop corned beef flank filet mignon rump beef sausage turducken. Pork chop kielbasa ground round, t-bone pork belly turducken brisket ribeye strip steak frankfurter pork loin pastrami
  filet mignon prosciutto bacon. Venison pork kielbasa, doner short ribs ball tip tri-tip porchetta boudin chuck salami shoulder shank shankle pastrami. Pig sirloin strip steak, frankfurter chicken beef ribs ribeye salami t-bone. Pork belly doner short
  loin ribeye burgdoggen ground round pork kielbasa frankfurter. Capicola spare ribs biltong kielbasa rump pork chop cow prosciutto shankle burgdoggen. Turkey shankle pancetta pig.
</div>

<input type="text" id="test" />