Text Processing with JavaScript

Recipe 22

Copying Text to Clipboard with the Clipboard API

Task

Suppose you have a cooking website that provides recipes for different meals, and you want to provide readers with the option of copying the ingredients of the recipes to their clipboard so that they can create a shopping list. To achieve this, you need to create a button that, when clicked, copies the list of ingredients to the clipboard.

Solution

First, set up your HTML elements. You need a button that triggers a JavaScript code. Remember, your program should not attempt to read or write the user’s clipboard without permission. So, creating a button that clearly states it copies data to the clipboard is the first step:

part_1/copying_to_clipboard/clipboard_ex1.html

<!doctype html> ...