Блог

У меня есть два основных текстовых ввода на HTML-странице, если ни один из них не находится в фокусе, и я нажимаю ярлык CTR A или CMD A, тогда содержимое обоих текстовых вводов не выбирается в Firefox, отлично работает в Chrome

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

Даже API выбора работает не так, как ожидалось в Firefox, т. е. он не выбирает два текстовых поля одновременно.
Я создал эту скрипку
чтобы объяснить проблему. Мне нужно выбрать все содержимое текстового ввода под определенным родительским узлом (div в моем случае), эта скрипка работает нормально, как и ожидалось, как в Chrome, так и в safari, но не в Firefox,

Я пробовал как range API, так и selection 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);
  

Да, 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>