Question Details

No question body available.

Tags

html firefox copy-paste

Answers (1)

April 20, 2026 Score: 0 Rep: 45,965 Quality: Medium Completeness: 80%

The obvious way is to make a shadow input + select that are hidden for the user but allow the text to be selected on Firefox, issue with that is that you'll get some content jumping or styling issues (Firefox doesn't allow copy on eg visibility hidden). So you'll need some ::selection styling to hide it.

const inputdom = document.querySelector('input');
const selectdom = document.querySelector('select');
const inputcopy = document.querySelector('#inputcopy');
const selectcopy = document.querySelector('#selectcopy');
inputcopy.textContent = inputdom.value;
selectcopy.textContent = selectdom.value;
inputdom.addEventListener('keyup', (e) => (inputcopy.textContent = e.target.value));
selectdom.addEventListener('change', (e) => (selectcopy.textContent = e.target.value))
@-moz-document url-prefix() {
  .ffhidden {
    display: inline-block !important;
  }
}
.ffhidden {
  display: none;
  color: transparent;
  max-width: 0;
}
.ffhidden::selection {
  color: transparent;
  background-color: transparent;
}
foo  
  baz
  bazbaz
 qux

So why not use the copy event to check if the copied text startsWith and endsWith those 2 anchors, and if so, inject the value of the input/select to the clipboard:

const inputdom = document.querySelector('input');
const selectdom = document.querySelector('select');
const startdom = document.querySelector('#start');
const enddom = document.querySelector('#end');
document.addEventListener('copy', e => {
  const selection = document.getSelection().toString();
  if (!selection.startsWith(startdom.textContent) || !selection.endsWith(enddom.textContent)) return;
  const newClip = [ startdom.textContent, inputdom.value, selectdom.value, enddom.textContent ].join(' ');
  console.log('Updated clipboard to ', newClip)
  e.clipboardData.setData('text/plain', newClip);
  e.preventDefault();
});
foo  
  baz
 qux