Exclude element from copied text in Safari

Question

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.

Does this answer your question? how to make user-select work for Safari browser — MrUpsidown
– MrUpsidown, Commented Dec 6, 2022 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
– twhb, Commented Dec 6, 2022 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
– twhb, Commented Dec 6, 2022 at 22:57

twhb · Accepted Answer · 2022-12-06 23:06:38Z

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.

answered Dec 6, 2022 at 23:06

twhb

4,6242 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Exclude element from copied text in Safari

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related