Choose Copy Button is a tiny jQuery plugin that enables customers to seize textual content snippets out of your net pages, like articles, documentation, or any block of textual content the place they could wish to copy parts.
As soon as customers spotlight any portion of textual content inside a specified DOM factor, a small button seems subsequent to the choice. Tapping or clicking the button copies the choice to the clipboard instantly, with non-obligatory visible suggestions like a “Copied!” message.
Options
- One-tap Copying: Makes use of the fashionable Clipboard API for environment friendly copying.
- Responsive Design: Works nicely on each cell and desktop browsers.
- Easy Integration: You may connect it to just about any DOM factor containing textual content.
- Styleable Button: You may customise the button’s look and textual content labels.
How one can use it:
1. Add the Choose Copy Button plugin’s JavaScript and CSS information to your net web page.
<hyperlink rel="stylesheet" href="path/to/select-copy-plugin.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="path/to/jquery.select-copy-plugin.js"></script>
2. Initialize the plugin on any jQuery selector that wraps the textual content content material you wish to make selectable.
$(doc).prepared(perform() {
$('article').selectCopyButton();
});
3. Accessible choices to customise the copy button.
buttonText: The textual content displayed on the copy button initially.copiedText: The textual content displayed on the button after a profitable copy.buttonClass: A customized CSS class utilized to the button. That is helpful for overriding default types or making use of new ones with out enhancing the plugin’s CSS immediately.onSelect: A callback perform that fires when textual content is chosen throughout the goal factor. It receives the chosen textual content string as an argument.
$('article').selectCopyButton({
buttonText: 'Copy',
copiedText: 'Copied!',
buttonClass: 'scb-button',
onSelect: null,
});
5. You may override the default button types utilizing CSS. The default class is .scb-button. If you happen to specify a buttonClass within the choices, use that class identify in your CSS.
.scb-button {
place: absolute;
padding: 10px 16px;
background-color: #28a745;
shade: white;
border: none;
border-radius: 6px;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 9999;
transition: opacity 0.2s ease;
}
.scb-button:lively {
background-color: #218838;
}
FAQs
Q: How do I alter the offset or precise place of the button?
A: The button is positioned 10px beneath the choice by default (window.scrollY + rect.backside + 10 + 'px'). To alter this, you’d want to switch this line within the jquery.select-copy-plugin.js file. For minor changes, you may additionally use CSS remodel: translateY(worth) in your buttonClass, however for important offset modifications, enhancing the JS is extra direct.
Q: Can I take advantage of this plugin on a number of, separate textual content containers on the identical web page?
A: Sure. Initialize it for every container. The plugin creates just one precise button factor within the DOM, which is then reused and repositioned as wanted when you choose textual content inside any of an initialized container.
Q: What occurs if navigator.clipboard is not accessible or fails? A: The plugin makes use of navigator.clipboard.writeText(). If this API is unavailable (older browsers) or the decision fails (e.g., browser permissions, not in a safe context like HTTPS), the .catch() block in handleCopy will set off an alert('Failed to repeat: ' + err). For broader compatibility with very outdated browsers, you’d want an answer that falls again to the older doc.execCommand('copy') technique, however that comes with its personal set of points and is usually not really useful if navigator.clipboard is an possibility. This plugin sticks to the fashionable API.
Q: Does the onSelect callback fireplace even when the chosen textual content could be very brief?
A: Sure, onSelect fires so long as choice.toString().trim() ends in a non-empty string. It fires proper earlier than the button is positioned and proven.
Q: I’ve a sticky header. Does the button account for this when positioning?
A: The plugin positions the button primarily based on rect.backside (backside of the choice) and window.scrollY. You probably have a sticky header that a component may scroll below, the button’s absolute positioning may place it below the header. You may want to regulate the high calculation within the plugin’s supply or guarantee your sticky header’s z-index is decrease than the button’s z-index (default 9999) in the event that they overlap, or add a high margin/padding to your content material space that matches the header peak.
This superior jQuery plugin is developed by avenart. For extra Superior Usages, please verify the demo web page or go to the official web site.
