Firefox 不允许同时选择两个文本输入

Question

我在 HTML 页面中有两个基本的文本输入，如果它们都不是焦点并且我按 CTR+A 或 CMD+A 快捷方式，那么在 Firefox 上没有选择两个文本输入的内容，在 chrome 上工作正常

<div>
<input type="text" onkeydown="myFunction(event)" value="test">
<input type="text" value="test1">
</div> 

即使选择 API 在 Firefox 上也没有像预期的那样工作，即它没有同时选择两个文本框。 我创建了this fiddle 来解释问题。我需要选择特定父节点（在我的情况下为 div）下的所有文本输入内容，这个小提琴在 chrome 和 safari 上都可以正常工作，但在 firefox 上却没有，

我已经尝试了范围 API 和选择 API 如下

window.getSelection().selectAllChildren(event.target.parentNode);

或

let range = document.createRange();

range.setStart(event.target.parentNode, 0);
range.setEnd(event.target.parentNode, 1);

window.getSelection().removeAllRanges();
window.getSelection().addRange(range);

Answer 1

是的，Firefox 不允许选择输入内容。我猜这是一种安全措施。

您可以通过设置输入的 textContent 属性来解决该问题，这样即使在 Firefox 中您也可以选择和复制其内容。

我在selectionchange 事件中执行此操作，但您可以在最适合您的情况下随时调用它。

document.onselectionchange = e => {
  console.log(e);
  // every time the selection changes
  document.querySelectorAll('input').forEach(el => {
    // except when we are the one in focus
    if(document.activeElement === el) return;
    // update each <input>'s textContent property
    el.textContent = el.value;
  })
}

<p>Try to select all (ctrl+A) the page and copy to clipboard (ctrl+C)</p>

<div>
  <input type="text" value="test">
  <input type="text" value="test1">
</div>