Svelte Action

Clipboard

Allows you to quickly copy data to the clipboard.

typescript 
import { clipboard } from '@skeletonlabs/skeleton';
Source Page Source

Demo

If your data is available as a primitive data type (string, integer, etc), you can provide it directly to the action.

Copying HTML Contents

To copy the innerHTML for an element, set a data-clipboard on your target, then provide an element reference to the action.

This div is set to 'contenteditable'. Make changes then tap copy.

Copying Input Values

To copy the target input value, set a data-clipboard data attribute on your target, then provide an input reference to the action.

Secure Context

This action utilizes the native browser Clipboard API which only functions within a Secure Context. For best results ensure your app is served with https://. Skeleton will produce a console error when this is triggered outside a Secure Context.