Omitting items from the duplicated text on Safari

I am looking for a way to allow users to copy and paste a block of text without including inline controls, such as buttons.

In Chrome, adding user-select: none; to the controls achieves this. When the user selects the entire paragraph, the buttons are not included in the selection, resulting in only the content getting copied.

However, in Safari, using -webkit-user-select: none;, although the selection visually indicates that the buttons are not selected, their content is still included when copying and pasting.

For example, in the demo below, the desired outcome is to copy "13", not "123" when selecting everything:

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

Other attempted solutions include placing the content in a shadow DOM, which did not work as expected.

A potential solution could involve converting the text into an SVG or manipulating the DOM so that the buttons are visually inline but not present within the actual DOM structure.

htmlcsssafaritextselection

Answer №1

Here's a clever trick you can use: utilize ::before or ::after. By adding a bit of CSS, you can easily make adjustments to content in real-time.

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

However, it's important to note that this method has its limitations as it does not fully support an entire DOM tree, only text or simple images.

Regarding screen readers, I am unsure if this technique is compatible with them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The unique filter in AngularJS ng-repeat is malfunctioning

I'm attempting to utilize the following distinct filter <ng-repeat="item in allItems | distinct:'itemName'" value="{{item.itemName}}">{{item.itemName}}> However, I'm encountering an error like this, Error: [$injector:unpr ...

angularjshtml

Instructions for creating a row container:

I'm still relatively new to HTML and I am currently in the learning process. However, I am encountering some difficulties when it comes to linking rows and divs. My goal is to create something similar to the image shown below where each element can b ...

htmlcssflexboxrowmultiple-columns

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Sending a form without the need to reload the page

While it's known that Ajax is the preferred method to submit a form without refreshing the page, going through each field and constructing the Post string can be time-consuming. Is there an alternative approach that utilizes the browser's built-i ...

javascriptajaxhtmlforms

Validation of user input using jQuery

Trying to ensure that the form inputs are not empty has been a challenge. Despite using jQuery for input validation, it seems that the inputs are not being properly checked. Strangely, the submit button still allows the form to be submitted: <form id=" ...

javascripthtmlformsinput

Troublesome Zopim Widget Design Dilemma

After adding the Zopim widget code to the head section of my website, I found that it consistently loads with a black color theme, ignoring any color settings I try to apply. I've attempted to adjust the styles using CSS and Javascript, but so far not ...

javascriptcss

Tips for smoothly animating without overlapping to the far right position

Here is the code I have: body { font-size: initial; line-height: initial; } @-webkit-keyframes slide { from { margin-left: 0%; } to { margin-left: 30%; } } @-webkit-keyframes turn { 0% { -webkit-transform: rotate(30deg); } ...

htmlcss

Customizing the appearance of an input button in Internet Explorer 8

I've been trying to style my file input section using a method similar to the one outlined in this article: . However, I'm encountering issues specifically with compatibility in IE8; all I can see is the corner of an oversized button. Here' ...

cssinternet-explorer-8opacity

Different choices for data attributes in React

Recently, I downloaded a new app that requires multiple API calls. The first API call retrieves 20 Objects, each with its own unique ID. The second API call is made based on the IDs from the first call. To display this data in my component: <div> ...

javascripthtmlreactjs

What is the best way to place a semi-transparent black overlay on an image?

<html> <head> <style> #contain_main {background-color:black; width:100%; height:auto;} #main {width:100%; height:700px; background-image:url("https://www.sappun.co.kr/shopimages ...

htmlcss

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Lately, I've been playing around with the HTML5 Canvas while working on an io game. However, I've hit a roadblock when it comes to handling the viewport. Setting up the viewport itself isn't too complicated, but accurately displaying other p ...

javascripthtmlcanvasviewport

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

cssruby-on-rails-3twitter-bootstrap

Utilizing commas in JavaScript

Hi everyone, I'm having an issue with printing the message "Invalid password, Must Contain:". The problem I'm facing is that when I write the code in JavaScript, the comma is being interpreted as an operator instead of a regular English comma. Th ...

javascripthtmlasp-classic

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

javascripthtmlsvgjquery-svgsvg-edit

Create an interactive list with the ability to be edited using HTML and

I'm currently working on a UI scenario that involves a text box field with two buttons beneath it. When the user clicks the first button, a popup will appear prompting them to input an IP address. Upon submitting the IP address in the popup, it will b ...

javascripthtml

The HTML document declaration is missing an error

I encountered an error in my code, here is the snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. ...

htmlnode.jssyntax-error

What causes my variable to show None instead of the current stock price?

I attempted to extract the stock price data from using BeautifulSoup. However, my program is not displaying the stock price and instead showing "None". How can I correctly retrieve the stock price information? My provided code snippet: from bs4 import Bea ...

pythonhtmlbeautifulsoup

What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening? <div> <svg viewBox="32 32 32 32" height="100" width="100"> ...

htmlcsssvg