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>

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

1 个答案: