1

I want users to be able to copy-paste a block of text without also getting inline controls, like buttons.

In Chrome, applying user-select: none; to the controls accomplishes this. If the user selects the whole paragraph, the buttons are excluded from the selection, and copying gives you only the content.

In Safari, using -webkit-user-select: none;, the selection visually shows that the buttons aren’t selected, but copy-pasting still includes their content.

Here’s a demo. The goal is that selecting everything then copying gets “13”, not “123”.

button {
  -webkit-user-select: none;
  user-select: none;
}
1<button>2</button>3

Also doesn’t work: putting the content in a shadow DOM.

Probably works, but I’m hoping for better: make the text an SVG, or contort the DOM so the buttons are inline only visually, not in the DOM.

twhb
  • 4,294
  • 2
  • 20
  • 23
  • Does this answer your question? [how to make user-select work for Safari browser](https://stackoverflow.com/questions/34372056/how-to-make-user-select-work-for-safari-browser) – MrUpsidown Dec 06 '22 at 22:36
  • @MrUpsidown no, the issue there is Safari property value support. However, the asker uses `user-select` differently than I assumed, which I think answers my question; I’ll answer it myself if it works out. – twhb Dec 06 '22 at 22:48
  • @MrUpsidown the solution there doesn’t also solve this, either they weren’t asking about copy-pasting, like this question, or Safari has changed since then. – twhb Dec 06 '22 at 22:57

1 Answers1

0

One workaround is using ::before or ::after. With a little CSS, you can keep content edits inline, too.

button::after {
  content: attr(data-content);
}
1<button data-content="2"></button>3

This has the major limitation of not supporting a full DOM tree, just text or an image.

I don’t know if this works with screen readers.

twhb
  • 4,294
  • 2
  • 20
  • 23