Sign upLogin

Chalarangelo/30-seconds-of-code

View on GitHub
Star
content/snippets/js/s/copy-text-to-clipboard.md

Summary

Maintainability
Test Coverage

Line length
Open

All you have to do is ensure `Navigator`, `Navigator.clipboard` and `Navigator.clipboard.writeText` are truthy and then call `Clipboard.writeText()` to copy the value to clipboard. In case anything goes wrong, you can use `Promise.reject()` to return a promise that rejects immediately and keep the return type consistent.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

2. Append the `<textarea>` element to the current HTML document and use CSS to hide it to prevent flashing.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

First header should be a top level header
Open

## The Asynchronous Clipboard API
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD002 - First header should be a top level header

Tags: headers

Aliases: first-header-h1

Parameters: level (number; default 1)

This rule is triggered when the first header in the document isn't a h1 header:

## This isn't a H1 header

### Another header

The first header in the document should be a h1 header:

# Start with a H1 header

## Then use a H2 for subsections

Line length
Open

5. Use `Document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Ordered list item prefix
Open

3. Use `Selection.getRangeAt()`to store the selected range (if any).
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD029 - Ordered list item prefix

Tags: ol

Aliases: ol-prefix

Parameters: style ("one", "ordered"; default "one")

This rule is triggered on ordered lists that do not either start with '1.' or do not have a prefix that increases in numerical order (depending on the configured style, which defaults to 'one').

Example valid list if the style is configured as 'one':

1. Do this.
1. Do that.
1. Done.

Example valid list if the style is configured as 'ordered':

1. Do this.
2. Do that.
3. Done.

Line length
Open

A very common need when building websites is the ability to **copy text to clipboard** with a single button click. Doing this programmatically with JavaScript is quite easy in modern browsers, using the asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). If, however, you need to support older browsers, there is an alternative option, but it's a little more complicated.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Ordered list item prefix
Open

5. Use `Document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD029 - Ordered list item prefix

Tags: ol

Aliases: ol-prefix

Parameters: style ("one", "ordered"; default "one")

This rule is triggered on ordered lists that do not either start with '1.' or do not have a prefix that increases in numerical order (depending on the configured style, which defaults to 'one').

Example valid list if the style is configured as 'one':

1. Do this.
1. Do that.
1. Done.

Example valid list if the style is configured as 'ordered':

1. Do this.
2. Do that.
3. Done.

Ordered list item prefix
Open

6. Remove the `<textarea>` element from the document and restore the user's previous selection, if any.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD029 - Ordered list item prefix

Tags: ol

Aliases: ol-prefix

Parameters: style ("one", "ordered"; default "one")

This rule is triggered on ordered lists that do not either start with '1.' or do not have a prefix that increases in numerical order (depending on the configured style, which defaults to 'one').

Example valid list if the style is configured as 'one':

1. Do this.
1. Do that.
1. Done.

Example valid list if the style is configured as 'ordered':

1. Do this.
2. Do that.
3. Done.

Line length
Open

excerpt: Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Ordered list item prefix
Open

2. Append the `<textarea>` element to the current HTML document and use CSS to hide it to prevent flashing.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD029 - Ordered list item prefix

Tags: ol

Aliases: ol-prefix

Parameters: style ("one", "ordered"; default "one")

This rule is triggered on ordered lists that do not either start with '1.' or do not have a prefix that increases in numerical order (depending on the configured style, which defaults to 'one').

Example valid list if the style is configured as 'one':

1. Do this.
1. Do that.
1. Done.

Example valid list if the style is configured as 'ordered':

1. Do this.
2. Do that.
3. Done.

Line length
Open

If you're concerned about browser support, you can use `Promise.prototype.catch()` to handle the error and **provide a fallback**. The fallback could even be using the legacy method, which we'll cover next.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

6. Remove the `<textarea>` element from the document and restore the user's previous selection, if any.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

1. Create a `<textarea>` element to be appended to the document. Set its value to the string you want to copy to the clipboard.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

While support for the Clipboard API is pretty high across the board, you might need a fallback if you have to **support older browsers**. If that's the case, you can use [`Document.execCommand('copy')`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) to do so. Here's a quick step-by-step guide:
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

Full support for the Clipboard API still isn't here at the time of writing (January, 2024), but you can at least use it to write to the clipboard. Thankfully, that's all you really need. Despite support caveats, this is the **recommended** way to copy text to clipboard, as it provides an **easy and secure** solution.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Line length
Open

> This method will not work everywhere, but only as a **result of a user action** (e.g. inside a `click` event listener). This is a security measure to prevent malicious websites from copying sensitive data to the clipboard without the user's consent.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD013 - Line length

Tags: line_length

Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)

This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.

This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.

You also have the option to exclude this rule for code blocks and tables. To do this, set the code_blocks and/or tables parameters to false.

Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.

Ordered list item prefix
Open

4. Use `HTMLInputElement.select()` to select the contents of the `<textarea>` element.
Severity: Info
Found in content/snippets/js/s/copy-text-to-clipboard.md by markdownlint

MD029 - Ordered list item prefix

Tags: ol

Aliases: ol-prefix

Parameters: style ("one", "ordered"; default "one")

This rule is triggered on ordered lists that do not either start with '1.' or do not have a prefix that increases in numerical order (depending on the configured style, which defaults to 'one').

Example valid list if the style is configured as 'one':

1. Do this.
1. Do that.
1. Done.

Example valid list if the style is configured as 'ordered':

1. Do this.
2. Do that.
3. Done.

There are no issues that match your filters.

Category
Status