I am currently using the Chrome browser. My background is blue and the text color is white.
Issue:
When I try to copy and paste the text into Word, it becomes invisible due to its color.
Is there a JavaScript solution to change the text color when selected so that the copied text is readable?
Similar Question discovered:
JavaScript: How do you check if a word is highlighted?
Instead of relying on JavaScript, have you considered using CSS to modify the ::selection color (specifically, the background highlighting color)?
For example, if your current background is a shade of blue and the default selection highlight color is also blue, experiment by changing it to a vibrant red:
::selection { /* for WebKit browsers */
background: #ffb7b7;
}
::-moz-selection { /* for Gecko browsers */
background: #ffb7b7;
}
There may be a few issues, however, this code performs well on Google Chrome:
window.addEventListener('copy', function() {
event.preventDefault();
event.clipboardData.setData("text/plain", document.getSelection().toString());
}, false);
Finally cracked it!
This was my successful approach:
var element = document.getElementById("elementID");
function copyEvent() {
element.style.color = 'black';
element.addEventListener("mousemove", triggerEvent);
}
function triggerEvent() {
element.style.color = 'white';
console.log('h');
element.removeEventListener("mousemove", triggerEvent);
}
element.addEventListener("copy", copyEvent);
Currently facing an issue with converting the given array format into a Highcharts compatible JSON to create a line chart. Although everything else is functioning correctly, I am struggling with this specific conversion task. { name: [ 1000, ...
In the process of developing a web application using React.js and react-bootstrap, I encountered an interesting challenge. On one of the form pages, users should be able to input symptoms of an illness they are dealing with. The key functionality required ...
I am in the process of creating a well-structured to-do list and I want to be able to add the input from any selected radio button into one of three options arrays (the array is not included in the code, but rather in a parent component). I am looking fo ...
Hey there, I'm struggling with the Payment Component. What I want to achieve is that when I click on a link, it transfers (ClassG, imageG, and PriceG) to the Payment Component where I can then style them accordingly. I've attempted something, but ...
I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this ...
Utilizing the Next.js App Router, I attempted to retrieve all my markdown posts stored in files by scanning a directory using fs.readdirSync(). While everything worked flawlessly locally, upon deploying on Vercel, an unexpected issue arose. The code was e ...
My heightmap-based plane is not working with raycasting, and I'm also having trouble placing an object above the hovered triangle. UPDATE: By commenting out the height section (pgeo.vertices[i].z = heightmap[i] * 5;), it seems to work inconsistently. ...
I'm currently working on setting up a Reverse Proxy with ARR and URL rewrite in order to achieve the following redirection: Source: http://localhost/test Destination: http://localhost:83/ The goal is for the final URL displayed to be same as the so ...
I found a way to copy files using this page https://developers.google.com/drive/v2/reference/files/copy. However, it only works when I request permission , allowing me to modify any file in their drive, which is not ideal. My goal is simply to copy a publ ...
When does the orientationchange event trigger in relation to window rotation completion? Is there a way to fire an event before the operating system initiates the integrated window rotation? Edit: For example, can elements be faded out before the rotation ...
Can NextJS be configured to handle dynamic routes that match both /country and /country/city, while excluding matches like /country/city/whatever_content_here? The goal is to display the same content for either of the specified routes, regardless of whethe ...
After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...
I am facing an issue in React where I want to persist state even after refreshing the page. I attempted to use localStorage, but every time the page is refreshed, the data gets cleared. function App() { const [selected, setSelected] = useState() con ...
How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...
How can I dynamically display different classes based on the presence of data in a JavaScript array? For example, if there is responseData.title, show the class 'grey'; otherwise, show the class 'white'. This is what I am attempting t ...
Working with Vite has been quite an experience for my project. I encountered a situation where using my API key directly worked fine, but when trying to import it from .env file, I faced the error message in the console below: {status_code: 7, status_me ...
Hey everyone, I'm currently facing an issue where I need to pass each date through a function in order to get the desired result. Let's take a closer look at the code snippet: <md-list> <md-divider ></md-divider> ...
In my GLTF scene, I have been exploring the use of the example selection box (code) to select multiple meshes. Unfortunately, the current approach is providing inaccurate results as it selects based on the centroid of each mesh and includes meshes that ar ...
I've encountered an issue with the datepicker where I am unable to select specific dates. I have a state containing an array of date strings and I need to configure the datepicker to only allow selection of these specific dates. Can someone please adv ...
I've spent a day trying to solve this issue but couldn't find a solution. Any help would be greatly appreciated. Recently, I was working on creating a cryptocurrency tracker in React. I successfully built a table that displays multiple currencie ...