Copy to clipboard using Javascript in iOS

JavaScript

iOS

clipboard

web development

copy to clipboard

Copy to clipboard using Javascript in iOS

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Copying text to the clipboard on iOS Safari is possible with JavaScript, but it comes with stricter rules than many desktop browsers. The two big constraints are secure context requirements and the fact that clipboard writes generally need to happen during a real user gesture such as a tap.

Prefer the modern Clipboard API first

The cleanest approach is navigator.clipboard.writeText. When the browser supports it and the page is running over HTTPS, this is the most readable solution.

html

1<!doctype html>
2<html>
3  <body>
4    <input id="source" value="Copied from iOS Safari" />
5    <button id="copyButton">Copy</button>
6
7    <script>
8      const button = document.getElementById("copyButton");
9      const source = document.getElementById("source");
10
11      button.addEventListener("click", async () => {
12        try {
13          await navigator.clipboard.writeText(source.value);
14          console.log("Copied");
15        } catch (error) {
16          console.error("Clipboard write failed", error);
17        }
18      });
19    </script>
20  </body>
21</html>

The important detail is that the write happens inside the click handler. If you call the same code from a timer or an automatic page load action, iOS Safari is likely to reject it.

Why a fallback is still useful

Older iOS browser behavior can be inconsistent, especially in older Safari versions or embedded web views. The traditional fallback is to place the text in a temporary textarea, select it, then call document.execCommand("copy").

html

1<script>
2  function fallbackCopy(text) {
3    const textarea = document.createElement("textarea");
4    textarea.value = text;
5    textarea.setAttribute("readonly", "");
6    textarea.style.position = "absolute";
7    textarea.style.left = "-9999px";
8    document.body.appendChild(textarea);
9
10    textarea.select();
11    textarea.setSelectionRange(0, textarea.value.length);
12
13    const successful = document.execCommand("copy");
14    document.body.removeChild(textarea);
15    return successful;
16  }
17</script>

This fallback is older and less elegant, but it still matters when you need broad compatibility across different iOS environments.

A practical combined approach

The best real-world strategy is feature detection: try the modern Clipboard API first, then fall back only if needed.

That keeps the main path simple while preserving a backup for browsers that do not fully support the newer API. It also makes debugging easier because you can log which branch executed.

Another iOS-specific detail is that focus and selection behavior can be finicky. When the fallback is used, make sure the temporary element is actually added to the DOM before selecting it. Skipping that step often causes silent failure.

Security and UX considerations

Clipboard access is intentionally restricted. Browsers treat it as a sensitive action because malicious pages could otherwise copy or replace clipboard content invisibly.

That is why user gestures matter so much. Your copy button should be explicit, and the UI should give feedback such as "Copied" or "Copy failed." A clipboard action with no visible confirmation can feel broken even when it succeeds.

Also remember that not every copy use case deserves automation. Sometimes selecting visible text is a better experience than adding clipboard logic that must fight mobile browser security rules.

Common Pitfalls

Calling clipboard code outside a user gesture and then wondering why iOS blocks it.
Forgetting that modern clipboard APIs generally require HTTPS.
Assuming navigator.clipboard support is identical across all iOS Safari and web view environments.
Using the fallback without inserting the temporary textarea into the DOM before selecting it.
Failing to show success or error feedback, which makes the feature feel unreliable.

Summary

On iOS, clipboard writes usually need a real user gesture and a secure context.
'navigator.clipboard.writeText is the preferred modern solution.'
A textarea plus document.execCommand("copy") fallback is still useful for broader compatibility.
Feature detection is the safest way to combine the two approaches.
Good UX includes visible feedback so users know whether the copy action worked.