如何无需更改焦点输入

Question

构建像下面的编辑器 - 我需要用户能够选择一些文本，然后使用输入来执行操作而不会失去选择。

function doReplace(){
  const s = document.getSelection()
  if(s?.anchorNode.parentElement.id != "out")return;
  
  console.log('replace')
  out.innerText = out.innerText.substring(0,s.anchorOffset)+(inp.value||'FALLBACK')+out.innerText.substring(s.extentOffset)
  
}

<input id="inp" placeholder="replace selection to" >
<button onclick="doReplace()">replace</button>
<p id="out">select some here and replace</p>

该演示重现了问题：一个人在不丢失文本选择的情况下无法使用输入。

如何在不改变重点的情况下输入？

真实的用例将是为选择的字体大小设置。

编辑

也许可以选择缓存选择，但是会失去视觉指示，尝试恢复选择会再次失去焦点。

let s

function doReplace() {
  if (s?.anchorNode?.parentElement.id != "out") return;

  console.log('replace')
  out.innerText = out.innerText.substring(0, s.anchorOffset) + (inp.value || 'FALLBACK') + out.innerText.substring(s.extentOffset)

}

function doRestore() {
  if (s?.anchorNode?.parentElement.id != "out") return;
  const sel = document.getSelection();
  sel.setBaseAndExtent(s.anchorNode, s.anchorOffset, s.anchorNode, s.extentOffset);
}
out.addEventListener('mouseup', () => {
  const sel = document.getSelection()
  if(!sel)return;
  const {
    anchorNode,
    anchorOffset,
    extentOffset
  } = sel || {}
  s = {
    text: sel.toString(),
    anchorNode,
    anchorOffset,
    extentOffset
  }
  console.log(`sel`, s.anchorOffset, s.extentOffset, s.text)
}, false);

<input id="inp" placeholder="replace selection to" autocomplete="false" onfocus="doRestore()">
<button onclick="doReplace()">replace</button>
<p id="out">select some here and replace</p>

Answer 1

如果我错了，请纠正我，但我看不出可能的方法。输入/TextArea标签需要焦点，以便用户能够键入。

我建议您使用EventListener而不是输入标签：

function doReplace(){
  const s = document.getSelection()
  if(s?.anchorNode.parentElement.id != "out")return;
  
  console.log('replace')
  out.innerText = out.innerText.substring(0,s.anchorOffset)+(inp.value||'FALLBACK')+out.innerText.substring(s.extentOffset)
  
}

window.addEventListener("keydown", event => {
  document.getElementById("field").innerHTML += event.key 
});

<div id="field"></div>
<button onclick="doReplace()">replace</button>
<p id="out">select some here and replace</p>