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

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" />

Answer 2

要达到预期效果，请使用以下选项

1. 将所选文本分配给变量
2. 使用选定的文本形成标签
3. 将所选文本替换为步骤2中的标记

var text;

$('#story').on('click', function(){
   text = ""
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }   
});


    $('#inpa').on('keypress', function(e){
      console.log(text)
	if(e.keyCode == 13){
        let a = $('#inpa').val();
        let ht = "<a href = '" + a + "' target = '_blank'>" + text + "</a>";
        let divText = $('#story').text();
        divText = divText.replace(text, ht);
    console.log(ht, text)
        $('#story').html(divText)
        
	}
});   

<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'>

codepen - https://codepen.io/nagasai/pen/MxQXgJ

Answer 3

如果您希望系统为您执行此操作，您所描述的内容是不可能的。但是，您可以使用少量JavaScript轻松实现此目的。当用户选择文本时，使用JS抓取它并使用CSS突出显示它。我会将文本包装在span或div或其他东西中，并给它一个独特的ID，以便您以后可以访问它。你可以找到如何获得文本here。因此，当用户关注输入时，文本看起来仍然会突出显示，一旦用户设置链接，您就可以以任何您喜欢的方式再次更新文本。